使用JavaScript在字符串中找到数组的样式值

Question

我有一个包含单词的数组，如果在字符串中找到这些单词，它们需要被加粗显示，但我无法正确地使其工作。

以下是我的代码。如您所见，我正在循环处理包含字符串的表格和数组。

在第一个字符串中，只有1个单词（venkel）被选中并替换，但仅替换一次。我需要在字符串中找到数组中的所有单词，并用加粗值替换它们。

更新：使用正则表达式时，并非所有单词都会更新。

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>

- Jonathan

---

请注意，使字符串加粗的方法已被弃用。 - Jamiec

@Jamiec 谢谢，我会考虑其他选择。 - Jonathan

Answer 1

使用正则表达式对您的product变量进行全局替换，如下所示:

new RegExp(product,"g");

您还需要更改代码为descriptionName[x].innerHTML = descriptionName[x].innerHTML.replace(reg, product.bold());以更改HTML内容而不是粗体文本。

工作示例

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>

- Ankit Agarwal

---

谢谢Ankit，但请注意，“selder”这个词没有被选中。 - Jonathan

@Jonathan 你需要更改 descriptionName[x].innerHTML = descriptionName[x].innerHTML.replace(reg, product.bold());，请查看更新后的答案并告诉我是否还有遗漏。 - Ankit Agarwal

太好了，谢谢！所以我只是缺少正则表达式部分。 - Jonathan