Необходимо избежать специального символа в строке селектора jQuery

Согласно селекторам docs, вы должны выйти [ с двойной обратной косой чертой и т.д. \\[.

У меня есть селектор, который создается таким образом (предположим, что val атрибут something[4][2] в этом примере).

var val = $(this).attr('val');           

$select.find('option[value=' +  val + ']').show();

Можно ли написать регулярное выражение, чтобы избежать скобок для меня?

Ответы

Ответ 1

Если вы хотите что-то, что работает с каким-либо значением, попробуйте следующее:

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

Это работает, избегая всех метасимволов CSS, перечисленных на странице Селекторов документации jQuery с двумя обратными слэшами.

Имейте в виду, что в вашей ситуации нет необходимости делать что-то сложное. Вы можете использовать функцию filter, чтобы выбрать все элементы опции с заданным значением без необходимости избегать значения, как описано в ответе Матиаса Биненса.

Ответ 2

Символьные escape-последовательности CSS (как используются в селекторах) сложны. Theyre настолько хитрой я даже сделал веб-приложение, которое может сказать вам, как избежать любого символа в CSS.

Его гораздо проще и эффективнее просто выбрать все option элементы, а затем filter их на основе их значения атрибута value:

var value = this.value;
$select.find('option').filter(function() {
  return this.value == value;
}).show();

Таким образом, никакого специального экранирования не требуется вообще.

Ответ 3

Проверьте это...

var val = $(this).attr('val').replace(/(\[|\])/g, '\\\\$1'); // something\\[4\\]\\[2\\]

конечно, это обрабатывает только скобки, а не любые другие специальные символы. Однако, по моему опыту, скобки являются единственными, которые я использую (из-за PHP удобный способ обработки атрибутов входных имен, таких как: something[])

Ответ 4

jQuery FAQ имеет приятное решение для этого, которое ускользает от всех символов, которые требуется jQuery.

Мне нравится эта нулевая версия того, что они предлагают:

function jqid (id) {
  return (!id) ? null : '#' + id.replace(/(:|\.|\[|\]|,|=|@)/g, '\\$1');
}

Ответ 5

Поместите кавычки вокруг значения атрибута в селекторе, тогда вам нужно только избежать обратных косых черт и кавычек в значении:

var val = $(this).attr('val');

val = val.replace(/\\/g, "\\\\").replace(/"/g, '\\"');

$select.find('option[value="' +  val + '"]').show();

Если вы знаете, что у значения нет обратных косых черт или кавычек (например, в вашем примере), вам не нужно ничего скрывать в значении, вам нужны только кавычки в селекторе.

Ответ 6

Позднее ответить, но

jQuery 3

и добавление отсутствующего "" в 'option[value="'+ val +'"]'

var val = "something[4][2]";

$("select").find('option[value="' +  val  + '"]').show();

option{
  display: none;
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<select>
  <option value="something[4][2]">4,2</option>
  <option value="something[1][1]">1,1</option>
</select>

Ответ 7

Если селектор заканчивается специальным char, вы не можете избежать его, используя двойную обратную косую черту. Работа arround заключается в использовании регулярных выражений: например, если идентификатор селектора является "бонус +", вы можете использовать:

$("div[id$='bonus+']")

Это имеет больший смысл, когда у вас есть динамические селектора.