How to verify if a certain value is present in a custom attribute using javascript or jquery?

39
October 22, 2019, at 1:40 PM

Lets say we have a custom attribute named data-content. Now lets look for the html markup :

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

I want a Javascript / jQuery function that can do something like this :

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

Or

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

So, how to do it ?

Answer 1

Using Attribute Contains Word Selector

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 plugin function

$.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

You can grab the element's attribute value and check the string index.

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

Using plain JavaScript:

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

You can add further checks, if the attribute even exists on the element, or not.

READ ALSO
How to get element from innerHTML?

How to get element from innerHTML?

I am trying to access element from another element's innerHTMLI have this element:

35
&ldquo;Loading leaks&rdquo; on LeakCanary is really slow, what alternatives do I have?

“Loading leaks” on LeakCanary is really slow, what alternatives do I have?

Every time I want to look into a leak, I click on the notification of the leak and it takes a really long time to load, like enough time that I usually forget about it

33
Created object in React Native is moving on IOS but not Android

Created object in React Native is moving on IOS but not Android

I am new to react native and I'm having a little trouble getting the created ball object to move in androidThe code I have now properly moves the object by dragging it on the screen with one finger in IOS

46
Android: Increase Geofences accuracy

Android: Increase Geofences accuracy

I'm building an app using Geofences, right now the minimum radius I can set so my geofence can get accurately detected is 30mI want to be able to set a minimum radius of 5m

22