Question

我确信此前必须提出此问题，但在搜索中找不到任何内容。确保从字符串中删除所有非安全字符以允许它在CSS类名中使用的最快方法是什么？

Answer 1

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

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"));

Answer 2

如果您的意思是以下符号

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

然后只需更换它们：

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

（我可能在其中添加了额外的或不够的转义字符）

这是quick demo。

但是你知道，并非所有这些符号都“不安全”，你可以在定位类名（ref）时转义符号。

Answer 3

我将它用于我的选择器，ID或类名：

＆＃13;

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

＆＃13;

Answer 4

您可以尝试使用django中的urlify.js。

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

Answer 5

如果有人对咖啡方式感兴趣：

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

Answer 6

使用jQuery：

$.escapeSelector(stringToEscape);

编辑：误解了原来的问题。这可以用于例如当按类名查询元素但不生成类名时。

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

6 个答案: