如何在jQuery中将标题转换为URL slug？

javascript jquery regex slug slugify

2022-08-30 01:23:10

我正在 CodeIgniter 中开发一个应用程序，并且我正在尝试在窗体上动态生成 URL slug。我想做的是删除标点符号，将其转换为小写字母，并将空格替换为连字符。例如，Shane的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);  
});

答案 1

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

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

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

如果你不希望“like - this”变成“like---this”，那么你可以改用这个：

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

这将删除第一个替换上的连字符（但没有空格），在第二个替换中，它将连续的空格压缩成单个连字符。

因此，“喜欢 - 这个”出来就是“喜欢这个”。

答案 2

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