Javascript中的全词正则表达式匹配和超链接

Question

我需要一点正则表达式的帮助。

我使用Javascript和JQuery在HTML文档中链接术语，为此，我使用以下代码。我这样做是为了在一份庞大的文件中提供一些术语。

var searchterm = "Water";

jQuery('#content p').each(function() {

  var content = jQuery(this),
      txt = content.html(),
      found = content.find(searchterm).length,
      regex = new RegExp('(' + searchterm + ')(?![^(<a.*?>).]*?<\/a>)','gi');

  if (found != -1) {
    //hyperlink the search term
    txt = txt.replace(regex, '<a href="/somelink">$1</a>');
    content.html(txt);
  }
});

然而，有一些情况我不想匹配，由于时间限制和大脑融化，我伸出一些援助。

编辑：我根据@ggorlen提供的优秀示例更新了下面的代码，谢谢！

示例 https://codepen.io/julian-young/pen/KKwyZMr

Answer 1

将整个DOM转储为原始文本并使用正则表达式对其进行解析规避了jQuery（以及JS，通过扩展）的主要目的，即将DOM作为节点的抽象树进行遍历和操作。

文本节点有一个nodeType节点。TEXT_NODE，我们可以在遍历中使用它来标识您感兴趣的非链接节点。

获得文本节点后，可以适当地应用正则表达式（解析文本，而不是HTML）。我使用了

jQuery 为您提供了一个 replaceWith 方法，该方法在您进行所需的正则表达式替换后替换节点的内容。

$('#content li').contents().each(function () {
  if (this.nodeType === Node.TEXT_NODE) {    
    var pattern = /(\b[Ww]aters?(?!-)\b)/g;
    var replacement = '<mark>$1</mark>';
    $(this).replaceWith(this.nodeValue.replace(pattern, replacement));
  }
});

html lang-html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Example Content</h1>
<div id="content">
  <ul>
    <li>Water is a fascinating subject. - <strong>match</strong></li>
    <li>We all love water. - <strong>match</strong></li>
    <li>ice; water; steam - <strong>match</strong></li>
    <li>The beautiful waters of the world - <strong>match</strong> (including the s)</li>
    <li>and all other water-related subjects - <strong>no match</strong></li>
    <li>and this watery topic of - <strong>no match</strong></li>
    <li>of WaterStewardship looks at how best - <strong>no match</strong></li>
    <li>On the topic of <a href="/governance">water governance</a> - <strong>no match</strong></li>
    <li>and other <a href="/water">water</a> related things - <strong>no match</strong></li>
    <li>the best of <a href="/allthingswater">all things water</a> - <strong>no match</strong></li>
  </ul>
</div>