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的安全類名稱

回答

相關問題