Javascript - check if div contains a word?

Question

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.

Igor Azevedo · Answer 1 · 2018-02-28T10:48:03.487

65

use the indexOf function

if(divs[i].innerHTML.indexOf("word") !== -1) {
    // something
}

edited Feb 28 '18 at 10:48

answered Mar 09 '12 at 00:38

Igor Azevedo

1,145
1
10
17

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. – TenLeftFingers Feb 11 '17 at 17:12

score 19 · Answer 2 · answered Mar 21 '17 at 14:51

19

Use includes():

node.textContent.includes('Some text');

answered Mar 21 '17 at 14:51

Scott Simpson

3,832
3
27
35

includes is not yet stable. poorly supported – Dr Upvote Aug 21 '20 at 11:34
@Fred Randall It looks well supported here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes – Billy Mitchell Sep 28 '22 at 15:06

score 4 · Answer 3 · answered Jul 01 '13 at 13:24

4

if (document.getElementById('divId').innerHTML.indexOf("word") != -1) { }

answered Jul 01 '13 at 13:24

Nimmi

680
8
18

score 3 · Answer 4 · answered Mar 09 '12 at 00:37

3

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

answered Mar 09 '12 at 00:37

Adam Rofer

6,121
1
14
11

score 2 · Answer 5 · answered Aug 06 '21 at 09:30

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";
}

answered Aug 06 '21 at 09:30

Seventro Gaming

23
3

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 06 '21 at 20:14

score 2 · Answer 6 · answered Mar 09 '12 at 00:38

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){

answered Mar 09 '12 at 00:38

MacMac

34,294
55
151
222

score 2 · Answer 7 · answered Mar 09 '12 at 00:47

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){}

answered Mar 09 '12 at 00:47

Nick Rolando

25,879
13
79
119

1

that will match HTML tag content too (i.e. tag names and attribute names and values). – RobG Mar 09 '12 at 02:29
It wasn't specified what type of content he was looking for. – Nick Rolando Mar 09 '12 at 02: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 09 '12 at 02:47

score 2 · Answer 8 · edited Apr 27 '22 at 00:37

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*/
}

score 0 · Answer 9 · answered Aug 05 '22 at 05:48

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

Torrent Lee · Answer 10 · 2012-03-09T05:04:46.943

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=

edited Mar 09 '12 at 05:04

answered Mar 09 '12 at 00:43

Torrent Lee

845
6
9

Will not work in browsers that don't support the W3C DOM *textContent* property. – RobG Mar 09 '12 at 02:29
Also, regex is slower and takes much more processing compared to indexOf – Benedikt M. Apr 30 '21 at 21:27

Javascript - check if div contains a word?

10 Answers10

Linked