javascript - 突出显示 HTML 页面中的重复单词

Question

我有一个包含 v-html 结果的表格(因此表格内的文本在页面呈现之前不会存在)。我想比较两行，如果它们有重复的单词，那么它们应该被突出显示。

这是一个 example project我想要的，但远远超出了我需要的范围。我的问题似乎最像 this one in the stacks但它需要定义单词，我希望页面自己找到它们。

例如，这将是预期的输出:

<table>
  <tr>
    <td v-html="link.orderdesciption">
    order:<br />
   <mark> TV </mark><br /> <!--note that the contents of the td would not appear in markup due to being v-html-->
    PS3 <br />
    Laptop
    </td>
    <td>
    qty:<br />
    1<br />
    2<br />
    1<br />
    </td>
  </tr>
  <tr>
    <td>
    ----------------
    </td>
    <td>
    ----------------
    </td>
  </tr>
  <tr>
    <td v-html="link.orderrecieved">
    recieved:<br /> <!--same note as above, v-html only shows-->
    <mark> TV </mark><br />
    Desktop<br />
    </td>
  </tr>
</table>

我一直在研究这个，但我真的不知道从这里去哪里:

var text = $('td').text(),
    words = text.split(' '),
    sortedWords = words.slice(0).sort(),
    duplicateWords = [];


for (var i=0; i<sortedWords.length-1; i++) {
    if (sortedWords[i+1] == sortedWords[i]) {
        duplicateWords.push(sortedWords[i]);
    }
}
duplicateWords = $.unique(duplicateWords);

谢谢你的建议，

Answer 1

使用reduce 得到duplicate words，然后你可以遍历tds 来检查其中的文本是否存在在重复的单词数组中。如果是，则将文本包装在 mark 标记中。

const tds = document.querySelectorAll('td');

const groupByOccurence = [...tds].reduce((accu, td) => {
  const textArr = td.innerHTML.split('<br>').map((word) => word.trim()).filter((word) => word.length > 0 && word.match(/[a-zA-Z]+/g));
  textArr.forEach((text) => {
    accu[text] = (accu[text] || 0) + 1;
  });
  return accu;
}, {});

const duplicateWords = Object.entries(groupByOccurence).filter(([_, val]) => val > 1).map(([key, _]) => key);

tds.forEach((td) => {
  const textArr = td.innerHTML.split('<br>').map((word) => word.trim());
  let str = "";
  textArr.forEach((text) => {
    if (duplicateWords.includes(text)) {
      str += '<mark>' + text + '</mark><br>';
    } else {
      str += text + '<br>';
    }
    td.innerHTML = str;
  })
});

const trs = document.querySelectorAll('tr');

trs.forEach((tr, i) => {
  const specialChartds = [...tr.querySelectorAll('td')].filter((td) => !td.textContent.match(/[a-zA-Z]+/g));
  if (!specialChartds) {
    tr.append(tds[i]);
  }
});

<table>
  <tr>
    <td>
      order:<br /> TV
      <br /> PS3 <br /> Laptop
    </td>
    <td>
      qty:<br /> 1
      <br /> 2
      <br /> 1
      <br />
    </td>
  </tr>
  <tr>
    <td>
      ----------------
    </td>
    <td>
      ----------------
    </td>
  </tr>
  <tr>
    <td>
      recieved:<br /> TV <br /> Desktop
      <br />
    </td>
  </tr>
</table>