Как избежать одиночной кавычки на атрибуте данных jquery - PullRequest
Новая
       7

Как избежать одиночной кавычки на атрибуте данных jquery

0 голосов
/ 01 октября 2019

Представьте, что у нас есть такая структура HTML: 

<main>
   <div id="one"></div>
   <div data-type="John 'phil',15">Light</div>
</main>

Я хотел бы выбрать элемент, используя его data-type, однако при попытке мой код выдает ошибку: 

let aliasScape = alias.replace(/['.*+?^${}()|[\]\\]/g, '\\$&'); //alias is "John 'phil',15"
$("[data-type =| '" + aliasScape + "']")

выражение не распознано [data-type = |'Джон' Фил ', 15']

Кто-нибудь знает, что не так? Спасибо!

Ответы [ 2 ]

0 голосов
/ 01 октября 2019

Попробуйте заключить селектор в одинарные кавычки и |= вместо =|

let alias = "John 'phil',15"
console.log($('[data-type|="' + alias + '"]')[0])
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
   <div id="one"></div>
   <div data-type="John 'phil',15">Light</div>
</main>
0 голосов
/ 01 октября 2019

Чтобы упростить селектор, вы можете предоставить функцию для filter(), которая напрямую соответствует методу data(). Таким образом, вам не нужно возиться с экранированием значения для работы в селекторе: 

let alias = "John 'phil',15";
var $elements = $("[data-type]").filter(function() {
  return $(this).data('type') == alias;
});

console.log($elements.length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
   <div id="one"></div>
   <div data-type="John 'phil',15">Light</div>
</main>
...