Konwertuję ciąg znaków javascript na bezpieczną nazwę klasy dla css

Question

Jestem pewien, że to musiało zostać zadane wcześniej, ale nie może znaleźć żadnych w wyszukiwaniu. Jaki jest najszybszy sposób na usunięcie wszystkich niechronionych znaków z ciągu znaków, aby można było użyć ich w nazwie klasy CSS?

Answer 1

Zamieniłbym wszystko, co nie jest małą literą lub cyfrą, a następnie dodałbym specjalny przedrostek, aby uniknąć kolizji z nazwami klas, które zostały użyte do innych celów. Na przykład, oto jeden z możliwych sposobów:

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

Jeśli masz na myśli następujące symbole

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

potem po prostu wymienić je z niczym:

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

(może Dodałem dodatkowe, czy też nie na tyle, ucieczka znaki tam)

Oto quick demo.

Ale jeśli wiesz, że nie wszystkie z tych symboli są "niebezpieczne", możesz po prostu uciec od symbolu podczas kierowania na nazwę klasy (ref).

Answer 3

Można spróbować urlify.js z Django.

Pobierz go z: https://github.com/django/django/blob/master/django/contrib/admin/static/admin/js/urlify.js

Answer 4

Jeśli ktoś jest zainteresowany w sposób kawy to:

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 5

Używam tego dla moich selektory, identyfikatory lub klas nazwami:

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

Answer 6

z jQuery:

$.escapeSelector(stringToEscape);