I am facing a challenge in styling words from an array if they are found in a string. My current code is not working as expected.
Below is the code I am using, where I am looping through both the array of words and the table containing strings.
Only one word (venkel) from the array gets picked up and replaced just once in the first string. However, I need all words in the array to be replaced with bold values if found in the strings.
UPDATE: When using Regex, not all words are updated
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>