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

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, '');

(我可能在那里添加了额外的或不够的转义字符)

这是一个快速演示.

但只是你知道,并非所有这些符号都是"不安全的",你可以在定位类名(ref)时转义符号.