Style values of array found in a string with JavaScript

Question

I have an array containing words that need to be styled if found in a string, but I'm struggling to make it work correctly.

Here is my code, as you can see I'm looping both the array and the table containing my strings.

in the first string, only 1 word (venkel) is being picked up and replaced but only once also. I need all the words in the array to be replaced if found in the strings by bold values.

UPDATE when using Regex, not every words update

var productName = ["witte asperges", "crème fraîche", "wijtingfilet", "selder", "BIO wortelen", "BIO rode ui", "venkel"],
  descriptionName = document.getElementsByClassName("Description");
for (var i = 0; i < productName.length; i++) {
  var product = productName[i];
  for (var x = 0; x < descriptionName.length; x++) {
    var description = descriptionName[x];
    if (description.textContent.indexOf(product) !== -1) {
      descriptionName[x].innerHTML = descriptionName[x].textContent.replace(product, product.bold());
    }
  }
}

<table style="width:60%;">
  <tbody>
    <tr>
      <td class="data Description">Spoel ondertussen de wortelen goed schoon en snijd de wortelen en de selder in blokjes van 2 cm. Verwijder het stugge uiteinde van de venkel en snijd in plakjes van 2 cm. Voeg de venkel, de wortelen en de selder toe aan de pan en laat 4 min.</td>
    </tr>
    <tr>
      <td class="data Description">Spoel de aardappelen en boen ze goed schoon. Snijd ze in blokjes van 3 cm en kook ze in zo’n 10-15 min. beetgaar in lichtgezouten water.</td>
    </tr>
    <tr>
      <td class="data Description">Giet de crème fraîche bij het vispannetje, breng op smaak met een snuifje zout en flink wat zwarte peper en laat 3 min. opwarmen. Dien het vispannetje op met de puree. Smakelijk!</td>
    </tr>
  </tbody>
</table>

Be aware that method of making a string bold is [deprecated](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/bold) — Jamiec, May 25 '18 at 10:23

Ankit Agarwal · Accepted Answer · 2018-05-25T11:14:42.460

Use a regular expression for the global replace on your product variable like this:

new RegExp(product,"g");

You also need to change the code to descriptionName[x].innerHTML = descriptionName[x].innerHTML.replace(reg, product.bold()); for changing the HTML content and not the text content with bold.

WORKING EXAMPLE

var productName = ["witte asperges", "crème fraîche", "wijtingfilet", "selder", "BIO wortelen", "BIO rode ui", "venkel"],
  descriptionName = document.getElementsByClassName("Description");
for (var i = 0; i < productName.length; i++) {
  var product = productName[i];
  for (var x = 0; x < descriptionName.length; x++) {
    var description = descriptionName[x];
    if (description.textContent.indexOf(product) !== -1) {
      var reg = new RegExp(product,"g");
      descriptionName[x].innerHTML = descriptionName[x].innerHTML.replace(reg, product.bold());
    }
  }
}

<table style="width:60%;">
  <tbody>
    <tr>
      <td class="data Description">Spoel ondertussen de wortelen goed schoon en snijd de wortelen en de selder in blokjes van 2 cm. Verwijder het stugge uiteinde van de venkel en snijd in plakjes van 2 cm. Voeg de venkel, de wortelen en de selder toe aan de pan en laat 4 min.</td>
    </tr>
    <tr>
      <td class="data Description">Spoel de aardappelen en boen ze goed schoon. Snijd ze in blokjes van 3 cm en kook ze in zo’n 10-15 min. beetgaar in lichtgezouten water.</td>
    </tr>
    <tr>
      <td class="data Description">Giet de crème fraîche bij het vispannetje, breng op smaak met een snuifje zout en flink wat zwarte peper en laat 3 min. opwarmen. Dien het vispannetje op met de puree. Smakelijk!</td>
    </tr>
  </tbody>
</table>

Thank you Ankit, but notice the word "selder" isn't being picked — Jonathan, May 25 '18 at 10:33
@Jonathan You need to change ` descriptionName[x].innerHTML = descriptionName[x].innerHTML.replace(reg, product.bold());` see the updated answer and let me know if it is still missing something — Ankit Agarwal, May 25 '18 at 11:15

Style values of array found in a string with JavaScript

1 Answers1