Как правильно экранировать значения атрибутов в селекторе атрибутов css/js [attr=value]?

Как я должен экранировать атрибуты в селекторе attibute css / js [attr=value]?

В частности, это правильно?

document.querySelector('input[name="test[33]"]')

Я ищу "стандартный способ" сделать это, если таковой имеется, потому что я не хочу, чтобы Sizzle использовал сложную для выполнения резервную функцию

Источник

3 ответа

Решение

Да, это один правильный подход. Спецификация Селекторов Уровня 3 гласит следующее:

Значения атрибута должны быть идентификаторами CSS или строками.

В примере в вашем вопросе в качестве значения атрибута используется строка. "Идентификатор" определяется следующим образом:

В CSS идентификаторы... могут содержать только символы [a-zA-Z0-9] и символы ISO 10646 U+00A0 и выше, плюс дефис (-) и подчеркивание (_); они не могут начинаться с цифры, двух дефисов или дефиса, за которым следует цифра. Идентификаторы также могут содержать экранированные символы и любые символы ISO 10646 в виде числового кода...

Итак, после этого также разрешается экранировать специальные символы и опускать кавычки:

document.querySelector('input[name=test\\[33\\]]')
Источник

Используйте CSS.escape() . Одним из преимуществ использования этого метода является то, что он работает с переменными, а не только со строковыми литералами:

      el = document.querySelector('input[name="' + CSS.escape(name) + '"]');

Он поддерживается во всех современных браузерах (caniuse).

Источник

используйте обратную косую черту следующего уровня apo+косую черту следующего уровня ThreeBackslash+apo

      $('mycard:has(\' mydiv:contains(\\\'Im a Hero\\\')\')')

CSS.escape просто создаст нейтральный текст, и вы, вероятно, захотите создать вложенные селекторы.

извините, это тоже работает неправильно, попробуйте смешать кавычки и апосо

Источник
Другие вопросы по тегам