Get element by a word it contains

user_14358399 0
Viewed 793

Is there a way to get an element by its content(a word it contains?)

For example, get all the elements with the letter "F," and put it in a array of elements

jquery-selectors html javascript
4 Answers

I highly recommand you to use jQuery for these kind of DOM elements searching. Then you can use this:

var foos = $("div:contains('foo')" )

will make an array with all divs containing the word 'foo'.

user_128846040

One fairly easy way is to select the elements you're interested in and then use 'filter' to look at the innerText. You can make this case insensitive with toLowerCase

var result = $('div').filter( (i,e) => e.innerText.toLowerCase().indexOf("f")>-1);
console.log("Items with 'F':",result.length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Forest</div>
<div>Fortnight</div>
<div>Trees</div>
<div>Africa</div>

The simpler way is using :contains('F') as a selector - but that is always case sensitive (which may be fine for your case).

user_2196610

You can use :contains as a selector. For example, to filter all divs of a special class that also contains your text, you can use $("div.myclass:contains('searched text')")

user_28859140

I think you can "bruteforce" it by iterating all DOM items. e.g.:

let arrayDom = Array.from(document.getElementsByTagName("*"));
       arrayDom.forEach(element => {
           if (element.innerHTML.contains('F')){
               // Do something
           }
       })
user_145214970
Related