Question

我有一个数组，其中包含在字符串中找到需要设置样式的单词，但我很难让它正常工作。

这是我的代码，你可以看到我循环数组和包含我的字符串的表。

在第一个字符串中，只有一个字（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>

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>

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

1 个答案: