【问题标题】:How to convert a Title to a URL slug in jQuery?如何在 jQuery 中将标题转换为 URL slug?
【发布时间】:2010-11-06 10:28:28
【问题描述】:

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

【问题讨论】:

  • 不是 jQuery,而是查看库 'speakingurl' 或 'node-slug'
  • ...或slugify

标签: javascript jquery regex slug slugify


【解决方案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, '-');
}

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

所以“like - this”会变成“like-this”。

【讨论】:

  • 如果您需要分隔多个目录,请不要忘记添加“/”
  • “slug”一词来自wordpress
  • 为了避免出现多个连续的连字符,我使用text.toLowerCase().replace(/ /g,'-').replace(/[-]+/g, '-').replace(/[^\w-]+/g,'');而不是选项2。选项2会将“th--is”更改为“this”。
  • 如何在 URL 中也允许点?
  • 为避免在 slug 中出现“_”,请将 .replace(/ +/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------";

【讨论】:

  • 但不正确。在德语文本中,ü 应替换为 ue 等。
  • @feklee:“不正确”对于德语(可能还有其他一些语言)是正确的,但在其他语言中它很好。对于英文网站,我希望将“Márföldi”(匈牙利血统的姓氏)转换为“marfoldi”,而不是像德国人那样转换为“marfoeldi”。
  • 为确保跨平台兼容性,您可能需要替换 from="\u00E3\u00E0\u00E1\u00E4\u00E2\u1EBD\u00E8\u00E9\u00EB\u00EA\u00EC\u00ED\u00EF\ u00EE\u00F5\u00F2\u00F3\u00F6\u00F4\u00F9\u00FA\u00FC\u00FB\u00F1\u00E7\u00B7/_,:;";
  • 不错的解决方案!错过了斯堪的纳维亚å
  • 您可以将İĞŞığş 添加到from 变量并将其转换为IGSigs 以支持土耳其字符。
【解决方案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);        
});

这应该可以解决问题...

【讨论】:

    【解决方案4】:

    希望这可以挽救某人的一天...

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

    【讨论】:

      【解决方案5】:

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

      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

      【讨论】:

        【解决方案6】:

        将此处答案中的各种元素与 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, "") 清除所有变音符号,保留基本字母。其余的用内联 cmets 解释。

        【讨论】:

        • 谢谢。这很简单,并且适用于我的测试用例。甚至越南语字符 ``` const testCases = [ { input: 'is it a good slug', expect: 'is-it-a-good-slug' }, { input: '-----is--- --it-----a-----good-----slug-----',期望:'is-it-a-good-slug' },{ 输入:'CÔNG cha như núi Thai Sơn',期望:'cong-cha-nhu-nui-thai-son' },{ 输入:'-Haha--Nhất-Nguyễn',期望:'haha-nhat-nguyen' } ]```
        • 如果有人在输入字符后立即触发此操作,请省略最后一行替换结尾破折号.replace(/-+$/, '');onblur,即当用户离开输入字段时。这样做将允许用户完全键入他们的 slug,否则它将始终删除下一个字母之前的“-”。
        • Also ".replace(/[^\w\-]+/g, ' ') //remove non-words" 应该是 ".replace(/[^\w-]+/ g, ' ')", and .replace(/\-\-+/g, '-') //折叠多个破折号应该是 ".replace(/--+/g, '-')"
        • 如果您将 normalize('NFD') 更改为 normalize('NFC'),(或者只是 normalize(),因为“NFC 是默认设置),您就不必再运行replace() 删除分解的变音符号。
        【解决方案7】:

        你只需要一个加号:)

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

        【讨论】:

          【解决方案8】:

          看看这个清理 URL 的 slug 函数,由 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;
          }
          

          【讨论】:

          • 在评论中有人说“由于 char_map 对象中存在重复,这不适用于在 IE11 浏览器中使用严格。”
          【解决方案9】:

          注意:如果您不关心反对已接受答案的论点,而只是在寻找答案,那么请跳过下一部分,您会在最后找到我提出的答案

          接受的答案有一些问题(在我看来):

          1) 至于第一个函数sn-p:

          不考虑多个连续的空格

          输入: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

          请注意,此实现不处理外部破折号(或就此而言的空白),无论它们是多个连续的破折号还是单个字符(据我了解,slug 及其用法)无效

          2) 至于第二个函数sn-p:

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

          它还从输入中完全删除了破折号,将 --is--it--a--good--slug--' 转换为 isitagoodslug 之类的东西,@ryan-allen 评论中的 sn-p 负责这一点,但外部破折号问题仍未解决

          现在我知道蛞蝓没有标准定义,并且接受的答案可能会完成工作(发布问题的用户正在寻找),但这是关于 JS 中蛞蝓的最受欢迎的 SO 问题,所以必须指出这些问题,而且(关于完成工作!)想象一下输入这个可憎的 URL (www.blog.com/posts/-----how-----to-----slugify-----a-----string-----) 或者甚至只是被重定向到它而不是像 (@ 987654333@),我知道这是一个极端的情况,但是这就是测试的目的。

          在我看来,更好的解决方案如下:

          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 方面的专家,我并不是说这是最好或最紧凑的解决方案或具有最好的性能,但希望它能完成工作。

          【讨论】:

          • 这有一个缺陷,将非字母数字字符转换为破折号可能会在行首恢复破折号。但请不要让它成为一个单行。这个很容易理解!
          【解决方案10】:
          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 以这种方式损坏。即使是最常用的反应库也没有实现这个功能。这个答案很简单,但很普遍。
          【解决方案11】:
          function slugify(content) {
             return content.toLowerCase().replace(/ /g,'-').replace(/[^\w-]+/g,'');
          }
          // slugify('Hello World');
          // this will return 'hello-world';
          

          这对我来说很好。

          CodeSnipper找到它

          【讨论】:

            【解决方案12】:

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

            默认用法:

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

            很容易有stringToSlug jQuery Plugin

            【讨论】:

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

              此代码有效

              【讨论】:

                【解决方案14】:

                您可能想看看speakingURL plugin,然后您就可以:

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

                【讨论】:

                  【解决方案15】:

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

                  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>

                  【讨论】:

                    【解决方案16】:

                    对于已经使用lodash的人

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

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

                    【讨论】:

                      【解决方案17】:

                      嗯,看完答案后,我想出了这个。

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

                      【讨论】:

                        【解决方案18】:

                        您可以为此使用自己的函数。

                        试试看: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;
                            });
                        });
                        

                        【讨论】:

                        • 这个解决方案与上面高度投票的答案有什么区别?
                        • 这里更新了代码,如果是“-”则删除最后一个字符jsfiddle.net/xstLr7aj/36
                        【解决方案19】:

                        接受的答案不符合我的需求(它允许下划线,不处理开头和结尾的破折号等),其他答案还有其他不适合我的用例的问题,所以这里是我想出的 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

                        【讨论】:

                          【解决方案20】:

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

                          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
                          }
                          

                          【讨论】:

                          • 你错过了很多角色
                          【解决方案21】:
                          //
                          //  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;
                              };
                          

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

                          【讨论】:

                            【解决方案22】:
                            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,'');
                            }
                            

                            我过滤了两次,因为更多 - 可能因为一些不需要的字符而被放入

                            【讨论】:

                              【解决方案23】:
                              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();
                              }
                              

                              【讨论】:

                                猜你喜欢
                                • 2011-05-30
                                • 2014-03-25
                                • 2011-07-21
                                • 1970-01-01
                                • 1970-01-01
                                • 2020-04-24
                                • 1970-01-01
                                • 2023-03-13
                                • 1970-01-01
                                相关资源
                                最近更新 更多