如何将标题转换为jQuery中的urlslu </s>?

我正在CodeIgniter中的一个应用程序,我试图使窗体上的字段dynamic生成的urlslu </s>。 我想要做的是删除标点符号,将其转换为小写字母,并用连字符replace空格。 例如,Shane的Rib Shack就会成为shane-rib-shack。

这是我迄今为止。 小写部分很容易,但replace似乎并没有工作,我不知道删除标点符号:

$("#Restaurant_Name").keyup(function(){ var Text = $(this).val(); Text = Text.toLowerCase(); Text = Text.replace('/\s/g','-'); $("#Restaurant_Slug").val(Text); }); 

我不知道'slug'这个词来自哪里,但是我们现在去:

 function convertToSlug(Text) { return Text .toLowerCase() .replace(/ /g,'-') .replace(/[^\w-]+/g,'') ; } 

首先replace将改变连字符的空格,第二次replace将删除任何不是字母数字,下划线或连字符。

如果你不想把“像这个”这样的东西变成“像这样”,那么你可以使用这个:

 function convertToSlug(Text) { return Text .toLowerCase() .replace(/[^\w ]+/g,'') .replace(/ +/g,'-') ; } 

这将删除第一个replace连字符(但不是空格),在第二个replace它会将连续的空格压缩成一个连字符。

所以“喜欢 – 这个”就像“这样”一样出来。

 var slug = function(str) { str = str.replace(/^\s+|\s+$/g, ''); // trim str = str.toLowerCase(); // remove accents, swap ñ for n, etc var from = "ãàáäâẽèéëêìíïîõòóöôùúüûñç·/_,:;"; var to = "aaaaaeeeeeiiiiooooouuuunc------"; for (var i=0, l=from.length ; i<l ; i++) { str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i)); } str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars .replace(/\s+/g, '-') // collapse whitespace and replace by - .replace(/-+/g, '-'); // collapse dashes return str; }; 

并尝试

 slug($('#field').val()) 

原作者: http : //dense13.com/blog/2009/05/03/converting-string-to-slug-javascript/


编辑:扩展更多的语言特定的字符:

 var from = "ÁÄÂÀÃÅČÇĆĎÉĚËÈÊẼĔȆÍÌÎÏŇÑÓÖÒÔÕØŘŔŠŤÚŮÜÙÛÝŸŽáäâàãåčçćďéěëèêẽĕȇíìîïňñóöòôõøðřŕšťúůüùûýÿžþÞĐđßÆa·/_,:;"; var to = "AAAAAACCCDEEEEEEEEIIIINNOOOOOORRSTUUUUUYYZaaaaaacccdeeeeeeeeiiiinnooooooorrstuuuuuyyzbBDdBAa------"; 

首先,正则expression式不应该有周围的引号,所以'/ \ s / g'应该是/ \ s / g

为了用破折号replace所有非字母数字字符,这应该工作(使用您的示例代码):

 $("#Restaurant_Name").keyup(function(){ var Text = $(this).val(); Text = Text.toLowerCase(); Text = Text.replace(/[^a-zA-Z0-9]+/g,'-'); $("#Restaurant_Slug").val(Text); }); 

这应该够了吧…

看看Sean Murphy在https://gist.github.com/sgmurphy/3095196开发的这个slug函数来清理url

 /** * Create a web friendly URL slug from a string. * * Requires XRegExp (http://xregexp.com) with unicode add-ons for UTF-8 support. * * Although supported, transliteration is discouraged because * 1) most web browsers support UTF-8 characters in URLs * 2) transliteration causes a loss of information * * @author Sean Murphy <sean@iamseanmurphy.com> * @copyright Copyright 2012 Sean Murphy. All rights reserved. * @license http://creativecommons.org/publicdomain/zero/1.0/ * * @param string s * @param object opt * @return string */ function url_slug(s, opt) { s = String(s); opt = Object(opt); var defaults = { 'delimiter': '-', 'limit': undefined, 'lowercase': true, 'replacements': {}, 'transliterate': (typeof(XRegExp) === 'undefined') ? true : false }; // Merge options for (var k in defaults) { if (!opt.hasOwnProperty(k)) { opt[k] = defaults[k]; } } var char_map = { // Latin 'À': 'A', 'Á': 'A', 'Â': 'A', 'Ã': 'A', 'Ä': 'A', 'Å': 'A', 'Æ': 'AE', 'Ç': 'C', 'È': 'E', 'É': 'E', 'Ê': 'E', 'Ë': 'E', 'Ì': 'I', 'Í': 'I', 'Î': 'I', 'Ï': 'I', 'Ð': 'D', 'Ñ': 'N', 'Ò': 'O', 'Ó': 'O', 'Ô': 'O', 'Õ': 'O', 'Ö': 'O', 'Ő': 'O', 'Ø': 'O', 'Ù': 'U', 'Ú': 'U', 'Û': 'U', 'Ü': 'U', 'Ű': 'U', 'Ý': 'Y', 'Þ': 'TH', 'ß': 'ss', 'à': 'a', 'á': 'a', 'â': 'a', 'ã': 'a', 'ä': 'a', 'å': 'a', 'æ': 'ae', 'ç': 'c', 'è': 'e', 'é': 'e', 'ê': 'e', 'ë': 'e', 'ì': 'i', 'í': 'i', 'î': 'i', 'ï': 'i', 'ð': 'd', 'ñ': 'n', 'ò': 'o', 'ó': 'o', 'ô': 'o', 'õ': 'o', 'ö': 'o', 'ő': 'o', 'ø': 'o', 'ù': 'u', 'ú': 'u', 'û': 'u', 'ü': 'u', 'ű': 'u', 'ý': 'y', 'þ': 'th', 'ÿ': 'y', // Latin symbols '©': '(c)', // Greek 'Α': 'A', 'Β': 'B', 'Γ': 'G', 'Δ': 'D', 'Ε': 'E', 'Ζ': 'Z', 'Η': 'H', 'Θ': '8', 'Ι': 'I', 'Κ': 'K', 'Λ': 'L', 'Μ': 'M', 'Ν': 'N', 'Ξ': '3', 'Ο': 'O', 'Π': 'P', 'Ρ': 'R', 'Σ': 'S', 'Τ': 'T', 'Υ': 'Y', 'Φ': 'F', 'Χ': 'X', 'Ψ': 'PS', 'Ω': 'W', 'Ά': 'A', 'Έ': 'E', 'Ί': 'I', 'Ό': 'O', 'Ύ': 'Y', 'Ή': 'H', 'Ώ': 'W', 'Ϊ': 'I', 'Ϋ': 'Y', 'α': 'a', 'β': 'b', 'γ': 'g', 'δ': 'd', 'ε': 'e', 'ζ': 'z', 'η': 'h', 'θ': '8', 'ι': 'i', 'κ': 'k', 'λ': 'l', 'μ': 'm', 'ν': 'n', 'ξ': '3', 'ο': 'o', 'π': 'p', 'ρ': 'r', 'σ': 's', 'τ': 't', 'υ': 'y', 'φ': 'f', 'χ': 'x', 'ψ': 'ps', 'ω': 'w', 'ά': 'a', 'έ': 'e', 'ί': 'i', 'ό': 'o', 'ύ': 'y', 'ή': 'h', 'ώ': 'w', 'ς': 's', 'ϊ': 'i', 'ΰ': 'y', 'ϋ': 'y', 'ΐ': 'i', // Turkish 'Ş': 'S', 'İ': 'I', 'Ç': 'C', 'Ü': 'U', 'Ö': 'O', 'Ğ': 'G', 'ş': 's', 'ı': 'i', 'ç': 'c', 'ü': 'u', 'ö': 'o', 'ğ': 'g', // Russian 'А': 'A', 'Б': 'B', 'В': 'V', 'Г': 'G', 'Д': 'D', 'Е': 'E', 'Ё': 'Yo', 'Ж': 'Zh', 'З': 'Z', 'И': 'I', 'Й': 'J', 'К': 'K', 'Л': 'L', 'М': 'M', 'Н': 'N', 'О': 'O', 'П': 'P', 'Р': 'R', 'С': 'S', 'Т': 'T', 'У': 'U', 'Ф': 'F', 'Х': 'H', 'Ц': 'C', 'Ч': 'Ch', 'Ш': 'Sh', 'Щ': 'Sh', 'Ъ': '', 'Ы': 'Y', 'Ь': '', 'Э': 'E', 'Ю': 'Yu', 'Я': 'Ya', 'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 'е': 'e', 'ё': 'yo', 'ж': 'zh', 'з': 'z', 'и': 'i', 'й': 'j', 'к': 'k', 'л': 'l', 'м': 'm', 'н': 'n', 'о': 'o', 'п': 'p', 'р': 'r', 'с': 's', 'т': 't', 'у': 'u', 'ф': 'f', 'х': 'h', 'ц': 'c', 'ч': 'ch', 'ш': 'sh', 'щ': 'sh', 'ъ': '', 'ы': 'y', 'ь': '', 'э': 'e', 'ю': 'yu', 'я': 'ya', // Ukrainian 'Є': 'Ye', 'І': 'I', 'Ї': 'Yi', 'Ґ': 'G', 'є': 'ye', 'і': 'i', 'ї': 'yi', 'ґ': 'g', // Czech 'Č': 'C', 'Ď': 'D', 'Ě': 'E', 'Ň': 'N', 'Ř': 'R', 'Š': 'S', 'Ť': 'T', 'Ů': 'U', 'Ž': 'Z', 'č': 'c', 'ď': 'd', 'ě': 'e', 'ň': 'n', 'ř': 'r', 'š': 's', 'ť': 't', 'ů': 'u', 'ž': 'z', // Polish 'Ą': 'A', 'Ć': 'C', 'Ę': 'e', 'Ł': 'L', 'Ń': 'N', 'Ó': 'o', 'Ś': 'S', 'Ź': 'Z', 'Ż': 'Z', 'ą': 'a', 'ć': 'c', 'ę': 'e', 'ł': 'l', 'ń': 'n', 'ó': 'o', 'ś': 's', 'ź': 'z', 'ż': 'z', // Latvian 'Ā': 'A', 'Č': 'C', 'Ē': 'E', 'Ģ': 'G', 'Ī': 'i', 'Ķ': 'k', 'Ļ': 'L', 'Ņ': 'N', 'Š': 'S', 'Ū': 'u', 'Ž': 'Z', 'ā': 'a', 'č': 'c', 'ē': 'e', 'ģ': 'g', 'ī': 'i', 'ķ': 'k', 'ļ': 'l', 'ņ': 'n', 'š': 's', 'ū': 'u', 'ž': 'z' }; // Make custom replacements for (var k in opt.replacements) { s = s.replace(RegExp(k, 'g'), opt.replacements[k]); } // Transliterate characters to ASCII if (opt.transliterate) { for (var k in char_map) { s = s.replace(RegExp(k, 'g'), char_map[k]); } } // Replace non-alphanumeric characters with our delimiter var alnum = (typeof(XRegExp) === 'undefined') ? RegExp('[^a-z0-9]+', 'ig') : XRegExp('[^\\p{L}\\p{N}]+', 'ig'); s = s.replace(alnum, opt.delimiter); // Remove duplicate delimiters s = s.replace(RegExp('[' + opt.delimiter + ']{2,}', 'g'), opt.delimiter); // Truncate slug to max. characters s = s.substring(0, opt.limit); // Remove delimiter from ends s = s.replace(RegExp('(^' + opt.delimiter + '|' + opt.delimiter + '$)', 'g'), ''); return opt.lowercase ? s.toLowerCase() : s; } 

所有你需要的是一个加号:)

 $("#Restaurant_Name").keyup(function(){ var Text = $(this).val(); Text = Text.toLowerCase(); var regExp = /\s+/g; Text = Text.replace(regExp,'-'); $("#Restaurant_Slug").val(Text); }); 

我创build了一个插件来实现大多数语言: http : //leocaseiro.com.br/jquery-plugin-string-to-slug/

默认用法:

 $(document).ready( function() { $("#string").stringToSlug(); }); 

stringToSlug jQuery Plugin非常简单

我find了一个很好的完整的英语解决scheme

 function slugify(string) { return string .toString() .trim() .toLowerCase() .replace(/\s+/g, "-") .replace(/[^\w\-]+/g, "") .replace(/\-\-+/g, "-") .replace(/^-+/, "") .replace(/-+$/, ""); } 

它使用的一些例子:

 slugify(12345); // "12345" slugify(" string with leading and trailing whitespace "); // "string-with-leading-and-trailing-whitespace" slugify("mIxEd CaSe TiTlE"); // "mixed-case-title" slugify("string with - existing hyphens -- "); // "string-with-existing-hyphens" slugify("string with Special™ characters"); // "string-with-special-characters" 

感谢Andrew Stewart

你可以使用你自己的function。

试试看: http : //jsfiddle.net/xstLr7aj/

 function string_to_slug(str) { str = str.replace(/^\s+|\s+$/g, ''); // trim str = str.toLowerCase(); // remove accents, swap ñ for n, etc var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;"; var to = "aaaaeeeeiiiioooouuuunc------"; for (var i=0, l=from.length ; i<l ; i++) { str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i)); } str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars .replace(/\s+/g, '-') // collapse whitespace and replace by - .replace(/-+/g, '-'); // collapse dashes return str; } $(document).ready(function() { $('#test').submit(function(){ var val = string_to_slug($('#t').val()); alert(val); return false; }); }); 
 function slugify(text){ return text.toString().toLowerCase() .replace(/\s+/g, '-') // Replace spaces with - .replace(/[^\u0100-\uFFFF\w\-]/g,'-') // Remove all non-word chars ( fix for UTF-8 chars ) .replace(/\-\-+/g, '-') // Replace multiple - with single - .replace(/^-+/, '') // Trim - from start of text .replace(/-+$/, ''); // Trim - from end of text } 

*基于https://gist.github.com/mathewbyrne/1280286

现在你可以转换这个string:

 Barack_Obama Барак_Обама ~!@#$%^&*()+/-+?><:";'{}[]\|` 

成:

 barack_obama-барак_обама 

适用于您的代码:

 $("#Restaurant_Name").keyup(function(){ var Text = $(this).val(); Text = slugify(Text); $("#Restaurant_Slug").val(Text); }); 

被接受的答案不符合我的需要(它允许下划线,在开始和结束时不处理破折号等),其他答案还有其他问题不适合我的用例,所以这里是slugify函数我想出了:

 function slugify(string) { return string.trim() // Remove surrounding whitespace. .toLowerCase() // Lowercase. .replace(/[^a-z0-9]+/g,'-') // Find everything that is not a lowercase letter or number, one or more times, globally, and replace it with a dash. .replace(/^-+/, '') // Remove all dashes from the beginning of the string. .replace(/-+$/, ''); // Remove all dashes from the end of the string. } 

这将变成'foo !!! BAR _-_-_ baz-'(注意开头的空格)变成foo-bar-baz

希望这可以拯救别人的一天…

 /* Encode string to slug */ function convertToSlug( str ) { //replace all special characters | symbols with a space str = str.replace(/[`~!@#$%^&*()_\-+=\[\]{};:'"\\|\/,.<>?\s]/g, ' ').toLowerCase(); // trim spaces at start and end of string str = str.replace(/^\s+|\s+$/gm,''); // replace space with dash/hyphen str = str.replace(/\s+/g, '-'); return str; } 

你可能想看看speakingURL插件 ,然后你可以:

  $("#Restaurant_Name").on("keyup", function () { var slug = getSlug($("#Restaurant_Name").val()); $("#Restaurant_Slug").val(slug); }); 

还有一个。 简短并保留特殊字符:

imaginaçãoémato => imaginacao-e-mato

 function slugify (text) { const a = 'àáäâãèéëêìíïîòóöôùúüûñçßÿœæŕśńṕẃǵǹḿǘẍźḧ·/_,:;' const b = 'aaaaaeeeeiiiioooouuuuncsyoarsnpwgnmuxzh------' const p = new RegExp(a.split('').join('|'), 'g') return text.toString().toLowerCase() .replace(/\s+/g, '-') // Replace spaces with - .replace(p, c => b.charAt(a.indexOf(c))) // Replace special chars .replace(/&/g, '-and-') // Replace & with 'and' .replace(/[^\w\-]+/g, '') // Remove all non-word chars .replace(/\-\-+/g, '-') // Replace multiple - with single - .replace(/^-+/, '') // Trim - from start of text .replace(/-+$/, '') // Trim - from end of text } 
 // // jQuery Slug Plugin by Perry Trinier (perrytrinier@gmail.com) // MIT License: http://www.opensource.org/licenses/mit-license.php jQuery.fn.slug = function(options) { var settings = { slug: 'slug', // Class used for slug destination input and span. The span is created on $(document).ready() hide: true // Boolean - By default the slug input field is hidden, set to false to show the input field and hide the span. }; if(options) { jQuery.extend(settings, options); } $this = $(this); $(document).ready( function() { if (settings.hide) { $('input.' + settings.slug).after("<span class="+settings.slug+"></span>"); $('input.' + settings.slug).hide(); } }); makeSlug = function() { var slug = jQuery.trim($this.val()) // Trimming recommended by Brooke Dukes - http://www.thewebsitetailor.com/2008/04/jquery-slug-plugin/comment-page-1/#comment-23 .replace(/\s+/g,'-').replace(/[^a-zA-Z0-9\-]/g,'').toLowerCase() // See http://www.djangosnippets.org/snippets/1488/ .replace(/\-{2,}/g,'-'); // If we end up with any 'multiple hyphens', replace with just one. Temporary bugfix for input 'this & that'=>'this--that' $('input.' + settings.slug).val(slug); $('span.' + settings.slug).text(slug); } $(this).keyup(makeSlug); return $this; }; 

这帮助我同样的问题!

纯JavaScript中更强大的slu generation生成方法。 它基本上支持西里尔字符和许多元音变音(德语,丹麦,法国,土耳其,乌克兰等),但可以很容易地扩展。

 function makeSlug(str) { var from="а б в г д е ё ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ā ą ä á à â å č ć ē ę ě é è ê æ ģ ğ ö ó ø ǿ ô ő ḿ ʼn ń ṕ ŕ ş ü ß ř ł đ þ ĥ ḧ ī ï í î ĵ ķ ł ņ ń ň ř š ś ť ů ú û ứ ù ü ű ū ý ÿ ž ź ż ç є ґ".split(' '); var to= "abvgdee zh ziyklmnoprstufh ts ch sh shch # y # e yu ya aa ae aaaacceeeeeeegg oe ooooomnnprs ue ss rld th hhiiiijklnnnrsstuuuuu uuuyyzzzc ye g".split(' '); str = str.toLowerCase(); // remove simple HTML tags str = str.replace(/(<[a-z0-9\-]{1,15}[\s]*>)/gi, ''); str = str.replace(/(<\/[a-z0-9\-]{1,15}[\s]*>)/gi, ''); str = str.replace(/(<[a-z0-9\-]{1,15}[\s]*\/>)/gi, ''); str = str.replace(/^\s+|\s+$/gm,''); // trim spaces for(i=0; i<from.length; ++i) str = str.split(from[i]).join(to[i]); // Replace different kind of spaces with dashes var spaces = [/(&nbsp;|&#160;|&#32;)/gi, /(&mdash;|&ndash;|&#8209;)/gi, /[(_|=|\\|\,|\.|!)]+/gi, /\s/gi]; for(i=0; i<from.length; ++i) str = str.replace(spaces[i], '-'); str = str.replace(/-{2,}/g, "-"); // remove special chars like &amp; str = str.replace(/&[az]{2,7};/gi, ''); str = str.replace(/&#[0-9]{1,6};/gi, ''); str = str.replace(/&#x[0-9a-f]{1,6};/gi, ''); str = str.replace(/[^a-z0-9\-]+/gmi, ""); // remove all other stuff str = str.replace(/^\-+|\-+$/gm,''); // trim edges return str; }; document.getElementsByTagName('pre')[0].innerHTML = makeSlug(" <br/> &#x202A;Про&amp;вер<strong>ка_тран</strong>с…литеърьации\rюга\nи&ndash;южного&nbsp;округа\t \nс\tёжикам&#180;и&nbsp;со\\всеми&ndash;друзьями\tтоже.Danke schön!ich heiße=КáÞÿá-Skånske,København çağatay rí gé tőr zöldülésetekről - . "); 
 <div> <pre>Hello world!</pre> </div> 
 private string ToSeoFriendly(string title, int maxLength) { var match = Regex.Match(title.ToLower(), "[\\w]+"); StringBuilder result = new StringBuilder(""); bool maxLengthHit = false; while (match.Success && !maxLengthHit) { if (result.Length + match.Value.Length <= maxLength) { result.Append(match.Value + "-"); } else { maxLengthHit = true; // Handle a situation where there is only one word and it is greater than the max length. if (result.Length == 0) result.Append(match.Value.Substring(0, maxLength)); } match = match.NextMatch(); } // Remove trailing '-' if (result[result.Length - 1] == '-') result.Remove(result.Length - 1, 1); return result.ToString(); }