如何将标题转换为jQuery中的URL段落？

Question

我正在研究CodeIgniter中的应用程序，并试图在表单上动态生成URL段落。我想要做的是删除标点符号，将其转换为小写字母，并用连字符替换空格。例如，Shane的Rib Shack将成为shane-rib-shack。

这是我到目前为止。小写的部分是容易的，但更换似乎并没有在所有可以工作，我不知道删除标点：

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

Answer 1

我不知道在哪里了“塞”一词从何而来，但在这里我们去：

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

首先替换会将空格更改为连字符，第二次替换将删除不包含字母数字，下划线或连字符的任何内容。

如果你不想要的东西“一样 - 这个”变成“像---这”，那么你可以使用它代替一个：

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

，将删除连字符（而不是空格）上第一个替换，并在第二个替换它会将连续的空格缩写为一个连字符。

所以“喜欢 - 这个”就像“喜欢这个”一样出现。

Answer 2

你需要的是一个加号:)

​​

Answer 3

所有所有的

首先，正则表达式不应该有包围引号，所以“/ \ S/G”应/\ S/G

为了用短划线来替换所有的非字母数字字符，这应该工作（我们荷兰国际集团的示例代码）：

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

这应该做的伎俩......

Answer 4

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(); 
} 

Answer 5

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

默认用法：

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

是很容易有stringToSlug jQuery插件

Answer 6

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------"; 

Answer 7

// 
// 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; 
    }; 

这帮助了我同样的问题！

Answer 8

你可以使用你自己的功能。

尝试：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; 
    }); 
}); 

Answer 9

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

现在你可以将这个字符串：

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

到：

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

申请代码：

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

Answer 10

看看这个蛞蝓功能消毒的URL，由肖恩·墨菲在开发https://gist.github.com/sgmurphy/3095196

/** 
* 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; 
} 

Answer 11

接受的答案并没有满足我的需求（它允许下划线，在开始和结束时不处理破折号等），其他答案还有其他问题不适合我的用例，所以这里是我提出的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。

Answer 12

希望这能救一个人的日子......

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

Answer 13

你可能想看看的speakingURL plugin，然后你只可以：

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

Answer 14

我为英语找到了一个很好且完整的解决方案

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

Answer 15

另一个之一。短并且保持特殊字符：

imaginaçãoé马托=> imaginacao-E-马托上纯JavaScript

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 
} 

Answer 16

更强大的蛞蝓生成方法。它基本上支持西里尔字符和许多元音变音（德语，丹麦语，法国，土耳其，乌克兰等）音译，但可以轻松扩展。

function makeSlug(str) 
 
{ 
 
    var from="а б в г д е ё ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ā ą ä á à â å č ć ē ę ě é è ê æ ģ ğ ö ó ø ǿ ô ő ḿ ʼn ń ṕ ŕ ş ü ß ř ł đ þ ĥ ḧ ī ï í î ĵ ķ ł ņ ń ň ř š ś ť ů ú û ứ ù ü ű ū ý ÿ ž ź ż ç є ґ".split(' '); 
 
    var to= "a b v g d e e zh z i y k l m n o p r s t u f h ts ch sh shch # y # e yu ya a a ae a a a a c c e e e e e e e g g oe o o o o o m n n p r s ue ss r l d th h h i i i i j k l n n n r s s t u u u u u u u u y y z z z c ye g".split(' '); 
 
\t 
 
    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) 
 
    \t str = str.replace(spaces[i], '-'); 
 
    str = str.replace(/-{2,}/g, "-"); 
 

 
    // remove special chars like &amp; 
 
    str = str.replace(/&[a-z]{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>

Answer 17

对于人们已经在使用lodash

大多数这些例子都非常好，涵盖了很多案例。但是，如果你“知道”你只有英文文本，这里是我的版本，这是超级容易阅读:)

_.words(_.toLower(text)).join('-')