Javascript конвертировать строку в безопасное имя класса для css

Я уверен, что это должно быть задано раньше, но не может найти его в поиске. Каков самый быстрый способ обеспечить удаление всех небезопасных символов из строки, позволяющей использовать ее в имени класса CSS?

Ответ 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"));

Ответ 2

Если вы имеете в виду следующие символы

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

то просто замените их ничем:

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

(Возможно, я добавил лишние или недостающие символы пробела)

Вот быстрая демонстрация.

Но так, чтобы вы знали, что не все эти символы являются "небезопасными", вы можете просто избежать символа при таргетинге на имя класса (ref).

Ответ 3

Вы можете попробовать urlify.js из django.

Получите его от: https://github.com/django/django/blob/master/django/contrib/admin/static/admin/js/urlify.js

Ответ 4

Если кто-то заинтересован в этом кофе:

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

Ответ 5

Я использую это для моих селекторов, идентификаторов или имен классов:

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