Как проверить, присутствует ли определенное значение в пользовательском атрибуте, используя javascript или jquery?

Question

Допустим, у нас есть собственный атрибут с именем data-content . Теперь давайте посмотрим на html-разметку:

 <h1 data-content="one two three four">Hello</h1>

Я хочу Javascript / jQuery , которая может выполнять что-то вроде этого:

 verify.contains("h1", "two"); // => true
 verify.contains("h1", "five"); // => false

Или

 $("h1").verifyContains("two"); // => true
 $("h1").verifyContains("five"); // => false

Итак, как это сделать?

Answer 1

Использование Атрибут содержит селектор слов

var verify = {
  contains: function(selector, content) {
    return Boolean($(selector + '[data-content~=' + content + ']').length)
  }
}

console.log(verify.contains("h1", "two"))
console.log(verify.contains("h1", "five"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 data-content="one two three four">Hello</h1>

Функция плагина Jquery

$.fn.verifyContains = function(content) {
  return $(this).is('[data-content~=' + content + ']')
}

console.log($("h1").verifyContains("two"))
console.log($("h1").verifyContains("five"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 data-content="one two three four">Hello</h1>

Answer 2

Вы можете получить значение атрибута элемента и проверить индекс строки.

var verify = {
  contains : function(selector, value) {
    return this.attributeContains(selector, 'data-content', value);
  },
  attributeContains : function(selector, attr, value) {
    return document.querySelector(selector).getAttribute(attr).indexOf(value) > -1;
  }
};

console.log(verify.contains('h1', 'two'));  // => true
console.log(verify.contains('h1', 'five')); // => false

<h1 data-content="one two three four">Hello</h1>

Answer 3

Использование простого JavaScript:

function myFunc(tag, val) {
  let x = document.getElementsByTagName(tag)[0].getAttribute("data-content"); 
  return x.includes(val)
}

Вы можете добавить дополнительные проверки, если атрибут даже существует на элементе или нет.