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 ) 時對符號進行轉義。

Answer 3

我將它用於我的選擇器、ID 或類名稱：

 String.prototype.safeCSSId = function() { return encodeURIComponent(this) .toLowerCase() .replace(/\\.|%[0-9a-z]{2}/gi, ''); } console.log("The dæmon is in the detail.".safeCSSId());

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

編輯：誤解了原來的問題。 這可以用於例如通過類名查詢元素但不能用於生成類名時。