Unable to determine if a string contains a word from an array

Question

I'm trying to determine if a string contains a word from an array by using jQuery's inArray function, which is shown here https://stackoverflow.com/a/18867667/5798798

In my example below, it should print 'hi' to the console twice as the word 'Hello' is in the string twice and is in the array, however it doesn't.

var array = ["Hello", "Goodbye"];

a = document.getElementsByClassName("here");

for (i = 0; i < a.length; i++) {
  itag = a[i].getElementsByTagName("i")[0];
  if (jQuery.inArray(itag.innerHTML, array) !== -1) {
    console.log('hi');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="here"><i><a href="link.php">Hello</a> | <a href="link2.php">Example</a></i>
</div>

<div class="here"><i><a href="link.php">Hey</a> | <a href="link2.php">Hello</a></i>
</div>

Logic is backwards. Need to loop through array and check each word against the longer string. You are trying to see if a long html string exists in the array — charlietfl, Dec 31 '17 at 18:00
You need to loop through the a elements inside the italic...and check their innerhtml — Ctznkane525, Dec 31 '17 at 18:02

Suren Srapyan · Accepted Answer · 2017-12-31T18:59:07.353

7

Change inArray function with array.some(text => itag.textContent.includes(text)).

Declare all variables via var or const or let.

Instead of innerHTML use textContent. This will not try to parse the content and will work faster.

var array = ["Hello", "Goodbye"];

var a = document.getElementsByClassName("here");

for (var i = 0; i < a.length; i++) {
    var itag = a[i].getElementsByTagName("i")[0];
    var textContent = itag.textContent;
    if(array.some(text => textContent.includes(text))) {
       console.log(textContent);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="here"><i><a href="link.php">Hello</a> | <a href="link2.php">Example</a></i>
</div>

<div class="here"><i><a href="link.php">Hey</a> | <a href="link2.php">Hello</a></i>
</div>

edited Dec 31 '17 at 18:59

answered Dec 31 '17 at 18:00

Suren Srapyan

66,568
14
114
112

Is there any chance you could explain the line of code `if(array.some(text => textContent.includes(text))) {` to me please? – The Codesee Jan 02 '18 at 00:23
It checks if the `textContent.includes(text)` returns true for at least one element in the `array`. In our case, if at least one item of `array` is included in the `textContent` – Suren Srapyan Jan 02 '18 at 16:21
Ah I see. Are you able to let me know the purpose of `=>` in this instance? – The Codesee Jan 08 '18 at 14:50
This is named `arrow function`. You can search for it – Suren Srapyan Jan 08 '18 at 15:01

score 2 · Answer 2 · edited Dec 31 '17 at 23:25

You are checking whether innerHTML is in the array or not.

Actually you should check whether the inner html consists of any of the array element.

So if you convert the above statement to code, it should be

var array = ["Hello", "Goodbye"];

a = document.getElementsByClassName("here");

for (i = 0; i < a.length; i++) {
   debugger;
   var itag = a[i].getElementsByTagName("i")[0];
   for (var k in array) {
    if(itag.innerHTML.indexOf(array[k]) > -1){
    console.log('hi');
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="here"><i><a href="link.php">Hello</a> | <a href="link2.php">Example</a></i>
</div>

<div class="here"><i><a href="link.php">Hey</a> | <a href="link2.php">Hello</a></i>
</div>

score 0 · Answer 3 · answered Dec 31 '17 at 18:17

Simpler approach is loop over the words array and use :contains selector

var array = ["Hello", "Goodbye"],
    $links = $('.here i a');

$.each(array, function(i, word){
  $links.filter(':contains(' + word +')').addClass('word-match');
})

.word-match {color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="here"><i><a href="link.php">Hello</a> | <a href="link2.php">Example</a></i>
</div>

<div class="here"><i><a href="link.php">Hey</a> | <a href="link2.php">Hello</a></i>
</div>

score 0 · Answer 4 · answered Dec 31 '17 at 18:50

Not really an answer, rather an extension to @SurenSrapyan answer with further improvements to your code.

Instead of dealing with this nested getElementsByTagName and getElementsByClassName here, you can write this as a single CSS-selector targeting the nodes: document.querySelectorAll('.here i:first-of-type');

And innerHTML and textContent are both getter that create the value as you fetch it by traversing the DOM. So better store the value once in a variable, than fetching it inside a loop where it has to be created over and over again; well, unless the value might have changed.

var words = ["Hello", "Goodbye"];
var nodes = document.querySelectorAll('.here i:first-of-type');

for(var i=0; i<nodes.length; ++i){
    var node = nodes[i];
    var textContent = node.textContent;
    if(words.some(word => textContent.includes(word))) {
       console.log(node, textContent);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="here">
  <i><a href="link.php">Hello</a> | <a href="link2.php">Example</a></i>
  <i>Hello, not matching me, as I'm not the first &lt;i&gt; in .here</i>
</div>

<div class="here"><i><a href="link.php">Hey</a> | <a href="link2.php">Hello</a></i>
</div>

score 0 · Answer 5 · answered Jan 03 '18 at 21:34

The most elegant way to find it is obviously a RegExp

    var array = ["Hello", "Goodbye"];

    var a = document.getElementsByClassName("here");
    Array.prototype.forEach.call(a, function( node ) {
      var itag = node.getElementsByTagName("i")[0]
      if (itag.innerHTML.match(new RegExp(array.join('|'), 'gi'))) {
        console.log('hi')
      }
   });

Unable to determine if a string contains a word from an array

5 Answers5