javascript将字符串转换为css的安全类名称

我相信这个必须先被问过，但在搜索中找不到任何东西。确保从字符串中删除所有非安全字符的最快方法是什么？它允许在CSS类名中使用它？javascript将字符串转换为css的安全类名称

2011-10-02 John Magnolia

最快？ https://mothereff.in/css-escapes#0~!%40%24%25%5E%26%2a%28%29%5f%2B-%3D%2C.%2F%27%3B%3A% 22％3F％3E％3C％5B％5D％5C％7B％7D％7C％60％23 – Mottie

我会替换不是小写字母或数字的任何东西，然后我会添加一个特殊的前缀以避免与您用于其他目的的类名冲突。例如，这里是一个可能的方式：

function makeSafeForCSS(name) { 
    return name.replace(/[^a-z0-9]/g, function(s) { 
     var c = s.charCodeAt(0); 
     if (c == 32) return '-'; 
     if (c >= 65 && c <= 90) return '_' + s.toLowerCase(); 
     return '__' + ('000' + c.toString(16)).slice(-4); 
    }); 
} 

// shows "prefix_c_a_p_s-numb3rs-__0024ymbols" 
alert("prefix" + makeSafeForCSS("CAPS numb3rs $ymbols"));

来源

2011-10-02 16:26:28 PleaseStand

如果你指的是以下符号

!"#$%&'()*+,./:;<=>[email protected][\]^`{|}~

然后就什么也没有取代他们：

names = names.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '');

（我可以额外增加了，还是不够，在那里转义字符）

这里是quick demo。

但是，只要您知道，并非所有这些符号都是“不安全”的，您只需定位类名（ref）就可以跳过该符号。

来源

2011-10-02 15:06:44 Mottie

这不会捕捉国际字符（例如à，è，ì，ò，À，È，Ì，Ò ，Ù）。 – NexusRex

@NexusRex这些都可以在类名中使用。事实上，[只要任何东西都是有效的]（https://mathiasbynens.be/notes/css-escapes）如果转义正确;现在这[包含HTML5中的id]（https://mathiasbynens.be/notes/html5-id-class）。 [另见本页]（https://mothereff.in/css-escapes）。 – Mottie

你可以尝试从Django中的urlify.js。

获取它： https://github.com/django/django/blob/master/django/contrib/admin/static/admin/js/urlify.js

来源

2013-12-04 10:41:55 shinnyx

如果有人有兴趣的这种咖啡的方法：

window.make_safe_for_css = (name) -> 
    name.replace /[^a-z0-9]/g, (s) -> 
     c = s.charCodeAt(0) 
     if c == 32 then return '-' 
     if c >= 65 && c <= 90 then return '_' + s.toLowerCase() 
     '__' + '000' + c.toString(16).slice -4

来源

2014-03-04 19:21:30 Philip

我用这对我的选择，ID或类名称：

String.prototype.safeCSSId = function() { 
 
    return encodeURIComponent(
 
    this.toLowerCase() 
 
    ).replace(/%[0-9A-F]{2}/gi,''); 
 
}

来源

2017-04-29 08:42:09

with jQuery：

$.escapeSelector(stringToEscape);

来源

2018-02-22 12:53:11

javascript将字符串转换为css的安全类名称

回答

相关问题