如何将一个标题转换为jQuery的URL段塞?

我在CodeIgniter的一个应用程序上工作，我试图使窗体上的字段动态生成URL蛞蝓。我想做的是删除标点符号，将其转换为小写字母，并将空格替换为连字符。比如，Shane's Rib Shack会变成shanes-rib-shack。

这是我目前所掌握的。小写部分很容易，但替换似乎根本不起作用，我也不知道要删除标点符号:

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

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

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

首先，正则表达式不应该有引号，所以/ \年代/ g应该是/ \ / g

为了用破折号替换所有非字母数字字符，这应该可以工作(使用示例代码):

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

这应该能奏效……

小开
最佳答案

我不知道“鼻涕虫”这个词从何而来，但我们开始吧:

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

第一个replace方法将空格更改为连字符，第二，replace删除任何非字母数字、下划线或连字符。

如果你不想要像这样的东西;变成“like——this”;那么你可以用这个代替:

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

这将在第一次替换时删除连字符(但没有空格)，在第二次替换时将连续的空格压缩为单个连字符。

所以“like - this”;结果是“像这样”。

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

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

默认的用法:

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

是很容易有stringToSlug jQuery插件

小开 
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/

< p >编辑: 扩展到更多特定于语言的字符:

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

这帮我解决了同样的问题!

小开

你可以使用你自己的函数。

试试: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

现在你可以转换这个字符串:

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

成:

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

应用于你的代码:

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

看看这个用来净化url的鼻涕虫函数，由Sean Murphy在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;
}
小开

接受的答案没有满足我的需求(它允许下划线，在开头和结尾不处理破折号，等等)，而其他答案有其他不适合我的用例的问题，所以这里是我想出的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, '-');
document.getElementById("slug-text").innerHTML = str;
//return str;
}
<input
type="text"
onload="convertToSlug(this.value)"
onkeyup="convertToSlug(this.value)"
value="Try it Yourself"
/>
<p id="slug-text"></p>

小开

你可能想看一下speakingURL插件，然后你就可以:

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

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

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"

感谢安德鲁•斯图尔特

小开

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

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
}
小开

更强大的纯JavaScript段代码生成方法。它基本上支持所有西里尔字母和许多变音字母(德语、丹麦语、法语、土耳其语、乌克兰语等)的音译，但可以轻松扩展。

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

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(/&[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>

小开

对于已经使用lodash的人

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

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

小开

将这里的答案中的各种元素与normalize结合起来可以提供很好的覆盖率。保持操作的顺序，以增量地清理url。

function clean_url(s) {
return s.toString().normalize('NFD').replace(/[\u0300-\u036f]/g, "") //remove diacritics
.toLowerCase()
.replace(/\s+/g, '-') //spaces to dashes
.replace(/&/g, '-and-') //ampersand to and
.replace(/[^\w\-]+/g, '') //remove non-words
.replace(/\-\-+/g, '-') //collapse multiple dashes
.replace(/^-+/, '') //trim starting dash
.replace(/-+$/, ''); //trim ending dash
}

normlize('NFD')将重音字符分解为它们的组件，这些组件是基本字母加上变音符号(重音部分)。replace(/[\u0300-\u036f]/g, "")清除所有的变音符号，只留下基本的字母。其余部分用内联注释解释。

小开

看完这些答案后，我想到了这个。

const generateSlug = (text) => text.toLowerCase()
.trim()
.replace(/[^\w- ]+/g, '')
.replace(/ /g, '-')
.replace(/[-]+/g, '-');
小开

注意:如果你不关心反对公认答案的论点，只是在寻找答案，那么跳过下一节，你会在最后找到我建议的答案

公认的答案有几个问题(在我看来):

1)对于第一个函数段:

不考虑多个连续的空白

输入:is it a good slug

收到:---is---it---a---good---slug---

预期:is-it-a-good-slug

不考虑多个连续破折号

输入:-----is-----it-----a-----good-----slug-----

收到:-----is-----it-----a-----good-----slug-----

预期:is-it-a-good-slug

请注意，这个实现不处理外部破折号(或空白)，无论它们是多个连续的字符还是单数字符(据我所知，以及它们的用法)是无效的

2)对于第二个函数段:

它通过将多个连续的空白转换为单个-来处理它们，但这还不够，因为外部(字符串的开头和结尾)空白的处理方式相同，因此is it a good slug将返回-is-it-a-good-slug-

它还从输入中完全删除破折号，从而将--is--it--a--good--slug--'转换为isitagoodslug， @ryan-allen评论中的代码片段处理了这一点，尽管没有解决外部破折号问题

现在我知道没有标准定义蛞蝓,和接受的答案可能得到那份工作(用户发布的问题是寻找),但这是最受欢迎的所以问题在JS蛞蝓,所以这些问题必须指出的那样,(关于完成工作!)想象打字这可憎的URL (www.blog.com/posts/-----how-----to-----slugify-----a-----string-----)甚至被重定向到它,而不是像(www.blog.com/posts/how-to-slugify-a-string),我知道这是一个极端的例子,但嘿,这就是测试。

在我看来，更好的解决方案是这样的:

const slugify = str =>
str
.trim()                      // remove whitespaces at the start and end of string
.toLowerCase()
.replace(/^-+/g, "")         // remove one or more dash at the start of the string
.replace(/[^\w-]+/g, "-")    // convert any on-alphanumeric character to a dash
.replace(/-+/g, "-")         // convert consecutive dashes to singuar one
.replace(/-+$/g, "");        // remove one or more dash at the end of the string

现在可能有一个RegExp忍者可以把它转换成一行表达式，我不是RegExp专家，我不是说这是最好的或最紧凑的解决方案，或具有最好的性能，但希望它可以完成工作。

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

这段代码正在工作

小开 
function slugify(content) {
return content.toLowerCase().replace(/ /g,'-').replace(/[^\w-]+/g,'');
}
// slugify('Hello World');
// this will return 'hello-world';

这对我来说很好。

在CodeSnipper找到的

小开 
String.prototype.slug = function(e='-'){
let $this=this
.toUpperCase()
.toLowerCase()
.normalize('NFD')
.trim()
.replace(/\s+/g,e)
.replace(/-\+/g,'')
.replace(/-+/g,e)
.replace(/^-/g,'')
.replace(/-$/g,'')
.replace(/[^\w-]/g,'');
return $this
.toUpperCase()
.toLowerCase()
.normalize('NFD')
.trim()
.replace(/\s+/g,e)
.replace(/-\+/g,'')
.replace(/-+/g,e)
.replace(/^-/g,'')
.replace(/-$/g,'')
.replace(/[^\w-]/g,'');
}

我过滤了两次，因为可能会有更多不需要的字符

小开 
<!DOCTYPE html>


<html>


<head>


<style>


fieldset.slugify {
color: #515151;
border: 1px solid #ccc;
padding: 15px;
}


.slugify legend {
font-size: 16px;
font-weight: 600;
padding: 0 10px;
}


.slugify input {
display: block;
padding: 8px;
margin: 8px;
}


.slug-output {
color: #05ab13;
font-size: 20px;
font-weight: 500;
}


</style>


</head>
 

<body>


<form>


<fieldset class="slugify">


<legend>GeeksforGeeks</legend>


<label for="slug-source">Input Title: </label>


<input type="text" value="" id="slug-source" onkeyup="myFunction()" />


<label for="slug-target">URL Slug: </label>


<input type="text" value="" id="slug-target" />


<button type="button" >


Convert
</button>
    

<p>


<span class="slug-output">
Generated URL Slug
</span>:


<span id="slug-target-span"></span>


</p>


</fieldset>


</form>


<script>


function myFunction() {


var a = document.getElementById("slug-source").value;


var b = a.toLowerCase().replace(/ /g, '-')


.replace(/[^\w-]+/g, '');


document.getElementById("slug-target").value = b;


document.getElementById("slug-target-span").innerHTML = b;


}


</script>


</body>
 

</html>
小开

有点扩展版的塔兰蒂尼的答案- https://stackoverflow.com/a/5782563/14431043

var from = "ªºÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿØĀāĂ㥹ĆćĈĉĊċČčĎďĐđĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſȘșȚț€£OơƯưẦầẰằỀềỒồỜờỪừỲỳẢảẨẩẲẳẺẻỂểỈỉỎỏỔổỞởỦủỬửỶỷẪẫẴẵẼẽỄễỖỗỠỡỮữỸỹẤấẮắẾếỐốỚớỨứẠạẬậẶặẸẹỆệỊịỌọỘộỢợỤụỰựỴỵɑǕǖǗǘǍǎǏǐǑǒǓǔǙǚǛǜ·/_,:;";
var to = "aoAAAAAAACEEEEIIIIDNOOOOOUUUUYTsaaaaaaaceeeeiiiidnoooooouuuuytyOAaAaAaCcCcCcCcDdDdEeEeEeEeEeGgGgGgGgHhHhIiIiIiIiIiIiJjKkkLlLlLlLlLlNnNnNnnNnOoOoOoOoRrRrRrSsSsSsSsTtTtTtUuUuUuUuUuUuWwYyYZzZzZzsSsTtE--oUuAaAaEeOoOoUuYyAaAaAaEeEeIiOoOoOoUuUuYyAaAaEeEeOoOoUuYyAaAaEeOoOoUuAaAaAaEeEeIiOoOoOoUuUuYyaUuUuAaIiOoUuUuUu------";

提交答案