在JavaScript中正确创建URL标记(包括UTF-8的音译)

本文概述

用Java脚本化
支持所有UTF-8字符
功能更短

除了改善你的文章的SEO之外, 使用Slug(语义URL)的目的还在于防止用户在创建文章时使用URL不允许的特殊字符来合理使用目标用法的含义取决于上下文。
如果用户出于不同的原因希望在公式编辑器中使用它, 你将希望允许它更改URL的链接(字面转换对我们的SEO无效, 即：C＃为c, 而c语言不同于C＃ , 因此用户可能希望将URL中的c更改为c-sharp)。
在本文中, 你将学习如何在Javascript中正确处理字符串, 包括(或不支持)cyrilic和特殊拉丁字符。
用Java脚本化以下函数提供了一种将文本转换为有效段的简单方法：

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

但是, 此功能将无法将特殊字符转换为等效字符, 如果要转换它们, 请继续阅读。
支持所有UTF-8字符如果你没有遇到这个问题, 你可能会问自己, 为什么以前的函数不能对所有字符串都起作用？答案很简单, URL中不支持的那些无法识别的字符(大多数为西里尔字母)现在将显示在该标签中。
为了理解这种行为, 我将向你展示以下示例：

slugify("Cómo hablar en sílabas"); // Outputs: cmo-hablar-en-slabas// However, it would be better if the URL is instead// "como-hablar-en-silabas"

有什么比将这些无法识别的字符转换为普通编码字符以创建” 普通” URL的子弹功能更好的呢？这就是以下功能的重点。
由Sean Murphy编写的以下代码片段将支持拉丁语, 希腊语, 乌克兰语, 波兰语等与正常字符等效的字符。该摘要已发布在Github中的原始Gist中。
注意：如果你不想为此使用如此大的功能, 则可以在本文末尾查看单行解决方案Providen, 该解决方案也支持UTF-8(使用最不知名的字符)。
请随意删除char_map对象, 这些字符在你所在的国家/地区可能没人会使用, 并使代码更短。

/** * 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': 'D', '?': 'N', 'ò': 'O', 'ó': 'O', '?': 'O', '?': 'O', '?': 'O', '?': 'O', '?': 'O', 'ù': 'U', 'ú': 'U', '?': 'U', 'ü': 'U', '?': 'U', 'Y': 'Y', 'T': 'TH', '?': 'ss', 'à': 'a', 'á': 'a', 'a': 'a', '?': 'a', '?': 'a', '?': 'a', '?': 'ae', '?': 'c', 'è': 'e', 'é': 'e', 'ê': 'e', '?': 'e', 'ì': 'i', 'í': 'i', '?': 'i', '?': 'i', 'e': 'd', '?': 'n', 'ò': 'o', 'ó': 'o', '?': 'o', '?': 'o', '?': 'o', '?': 'o', '?': 'o', 'ù': 'u', 'ú': 'u', '?': 'u', 'ü': 'u', '?': 'u', 'y': 'y', 't': '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; }

功能更短如果由于你是代码” 工匠” 而不想使用前面提到的功能, 或者只是使用几个字符, 则可以改用以下功能：

function slugify(str) {str = str.replace(/^\s+|\s+$/g, ''); // trimstr = str.toLowerCase(); // remove accents, swap ? for n, etcvar from = "?àá?a?èé?êìí???òó??ùúü???·/_, :; "; 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 dashesreturn str; };

如你所见, 它支持URL中包含的复杂字符的转换(由á到A, 从ü到u等), 并且你不需要为此提供大型功能。
【在JavaScript中正确创建URL标记(包括UTF-8的音译)】玩得开心！