Question

我有一个输入，允许用户根据搜索查询过滤表行。我想突出显示匹配，但不幸的是，它目前会突出显示用户看不到的内容。

给出这样的行;

<tr>
  <td>Row 1</td>
  <td>&#215; 4</td>
  <td><span class="tag1">Archived</span></td>
</tr>

突出显示匹配的代码（实际过滤行的代码是独立的）如下所示（content等于每个td的innerHTML）;

return String(content).replace(new RegExp("("+query+")", "gi"), '<em class="highlight">$1</em>');

遗憾的是，query == "1";

会输出类似的内容

<tr>
  <td>Row <em class="highlight">1</em></td>
  <td>&#2<em class="highlight">1</em>5; 4</td>
  <td><span class="tag<em class="highlight">1</em>">Archived</span></td>
</tr>

第一个单元格将按预期显示，但单元格2和3中的HTML实体和标记将显示为已损坏。

我试图像这样过滤掉这些;

var strip_tags = String(content).replace(/(<([^>]+)>)/ig,"");
var convert_entities = $('<textarea />').html(strip_tags).text();
return convert_entities.replace(new RegExp("("+this.query+")", "gi"), '<em class="highlight">$1</em>');

但是，这自然也会从输出中删除标签;

<tr>
  <td>Row <em class="highlight">1</em></td>
  <td>× 4</td>
  <td>Archived</td>
</tr>

在这种情况下，单元格1和单元格2是按预期的，但单元格3已丢失其span标记。

如何在JavaScript中突出显示搜索匹配项，以便不考虑HTML实体和标记，但也不会将其删除？

突出显示可见文本中的搜索匹配

0 个答案: