44

How can I check if a div contains a certain word?

var divs= document.getElementsByTagName('div');
for (var i = 0, len = divs.length; i < len; ++i) {

    if (divs[i].text = '*word*'){
    //do somthing
}
}

doesn't work.

10 Answers 10

65

use the indexOf function

if(divs[i].innerHTML.indexOf("word") !== -1) {
    // something
}
1
  • Replacing // something with divs[i].style.background = "red"; still highlights the entire page. How to get a reference for the div containing "word"? Granted, the question doesn't ask for that depth but for completion/curiosity it would be interesting. Feb 11, 2017 at 17:12
20

Use includes():

node.textContent.includes('Some text');
2
4
if (document.getElementById('divId').innerHTML.indexOf("word") != -1) { }
3

Try the String.indexOf() function: if (divs[i].text.indexOf('word') != -1) {

2

You have to use a comparison operator not assign a variable.

if (divs[i].text == '*word*'){

I would recommend to use indexOf.

if (divs[i].text.indexOf('*word*') != -1){
2

In addition to what others said about using .indexOf() function, I'd like to say .text is not a div node property. User .innerHTML

if (divs[i].innerHTML.indexOf('word') > -1){}
3
  • 1
    that will match HTML tag content too (i.e. tag names and attribute names and values).
    – RobG
    Mar 9, 2012 at 2:29
  • It wasn't specified what type of content he was looking for. Mar 9, 2012 at 2:41
  • 2
    I might be wrong, but I think it's pretty clear the OP was looking to match text content, not markup.
    – RobG
    Mar 9, 2012 at 2:47
2

html :

<div id="ok">Hello world</div>

javascript :

var ok;

ok = document.getElementById("ok").innerHTML

if (ok.includes("world")) {
  document.getElementById("ok").innerHTML = "its working";
}
1
  • 2
    Welcome to SO. Please take the time to explain your answer rather than just posting code. Especially since this is an old question with other answers, it's important to state why yours is different or improves on the others.
    – rmlockerd
    Aug 6, 2021 at 20:14
2

Gosh, so many answers!

To get just the text of an element, the simple way is to use textContent or, were not supported, innerText. All browsers in use support one or the other (maybe both). You can also use a regular expression (indexOf works too, a RegExp is just an option) so:

var re = new RegExp('*' + word + '*');

if (re.test(div[i].innerText || div[i].textContent)) {
  // div[i] contains /*word*/
} 

A more robust solution would be like:

function getText(el) {
  if (typeof el.textContent == 'string') {
    return el.textContent;
  }
  if (typeof el.innerText == 'string') {
    return el.innerText;
  }
}

var re = new RegExp('*' + word + '*');

if (re.test(getText(div[i]))) {
  // div[i] contains /*word*/
} 
0

use regexp:

if ( divs[i].textContent.match ( /\bword\b/ ) ){
    //do something
}

@RobG remind me so

if ( divs[i].innerHTML.match ( /\bword\b/ ) ){
    //do something
}

=3=

2
  • Will not work in browsers that don't support the W3C DOM textContent property.
    – RobG
    Mar 9, 2012 at 2:29
  • Also, regex is slower and takes much more processing compared to indexOf Apr 30, 2021 at 21:27
0
<ul class="single-headlines">
        <li>Fixed Shipping Sek 29</li>
        <li>44/5 Trustpilot</li>
        <li>Fast Delivery</li>
    </ul>

<script>
jQuery(".single-headlines > li:first").text(function () {
    return jQuery(this).text().replace("Fixed Shipping Sek 29", "Fast fraktkostnad SEK 29"); 
});
jQuery(".single-headlines > li:nth-child(3)").text(function () {
    return jQuery(this).text().replace("Fast Delivery", "Snabb leverans"); 
});
</script>

By selector Find the text which have to replace. text() return the selected text element replace() change the text.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.