这里有两种方法可以解决这个问题。
我不知道下面的代码是否 * 完全 * 符合您的需要。这是一个足够简单的解决方案，但至少它没有使用RegEx来操作HTML标记。它对原始文本执行模式匹配，然后使用DOM来操作内容。
第一次接近
这种方法只为每个匹配创建一个<span>标记，利用了一些不太常用的浏览器API。

• （请参阅演示下面的此方法的主要问题，如果不确定，请使用第二种方法）*。

Range类表示一个文本片段。它有一个surroundContents函数，可以让你在元素中 Package 一个范围。除了它有一个警告：
该方法近似等价于newNode.appendChild(range.extractContents()); range.insertNode(newNode)，包围后，范围的边界点包括newNode。

**但是，如果Range只使用一个边界点拆分非Text节点，则会引发异常。**也就是说，与上面的替代方法不同，如果存在部分选择的节点，则不会克隆这些节点，相反，操作将失败。

嗯，MDN中提供了解决方法，所以一切都很好。
这里有一个算法：

• 创建一个Text节点列表，并在文本中保留它们的起始索引
• 连接这些节点的值以获得text
• 在文本中查找匹配项，对于每个匹配项：
• 查找匹配的起始节点和结束节点，将节点的起始索引与匹配位置进行比较
• 在比赛上创建Range
• 让浏览器使用上面的技巧来完成这些肮脏的工作
• 自上次操作更改DOM以来重建节点列表

以下是我的实现和演示：
第一个
好了，这就是 lazy 方法，不幸的是，它在某些情况下不起作用。如果你 * 只 * 突出显示内联元素，它会很好地工作，但是当沿着有块元素时，它会中断，因为extractContents函数的以下属性：
克隆部分选定的节点以包括使文档片段有效所需的父标记。
这很糟糕。它只会复制块级节点。如果你想看看它是如何崩溃的，请尝试前面的baz\s+HTML正则表达式演示。
第二次接近
这种方法迭代匹配的节点，同时创建<span>标记。
整个算法很简单，因为它只是将每个匹配节点 Package 在自己的<span>中，但这意味着我们必须处理部分匹配的文本节点，这需要更多的工作。
如果文本节点部分匹配，则使用splitText函数拆分它：
拆分后，当前节点包含指定偏移点之前的所有内容，新创建的相同类型的节点包含剩余文本。新创建的节点返回给调用方。
第一个
如果你需要最小化<span>标签的数量，可以通过扩展这个函数来实现，但是我想让它保持简单。

第一个

我将使用“平面DOM”表示来完成此类任务。
在平面DOM中此段落

<p>abc <a href="beta.html">def. ghij.</p>

将由两个向量表示：

chars: "abc def. ghij.",
props:  ....aaaaaaaaaa,

您将在chars上使用normal regexp来标记props向量上的跨度区域：

chars: "abc def. ghij."
props:  ssssaaaaaaaaaa  
            ssss sssss

我在这里用的是示意图表示，它的真实的结构是一个数组的数组：

props: [
  [s],
  [s],
  [s],
  [s],
  [a,s],
  [a,s],
  ...
]

转换树DOM<->平面DOM可以使用简单状态自动机。
最后，将平面DOM转换为树DOM，如下所示：

<p><s>abc </s><a href="beta.html"><s>def.</s> <s>ghij.</s></p>

以防万一：我在我的HTML WYSIWYG编辑器中使用这种方法。

正如大家已经说过的，这是一个学术问题，因为这不应该是你真正做的方式。
编辑：我想我现在明白了要点。

function myReplace(str) {
  myRegexp = /((^<[^>*]>)+|([^<>\.]*|(<[^\/>]*>[^<>\.]+<\/[^>]*>)+)*[^<>\.]*\.\s*|<[^>]*>|[^\.<>]+\.*\s*)/g; 
  arr = str.match(myRegexp);
  var out = "";
  for (i in arr) {
var node = arr[i];
if (node.indexOf("<")===0) out += node;
else out += "<span>"+node+"</span>"; // Here is where you would run whichever 
                                     // regex you want to match by
  }
  document.write(out.replace(/</g, "&lt;").replace(/>/g, "&gt;")+"<br>");
  console.log(out);
}

myReplace('<p>This program is <a href="beta.html">not stable yet. Do not use this in production yet.</a></p>');
myReplace('<p>This is a <b>sentence. </b></p>');
myReplace('<p>This is a <b>another</b> and <i>more complex</i> even <b>super complex</b> sentence.</p>');
myReplace('<p>This is a <b>a sentence</b>. Followed <i>by</i> another one.</p>');
myReplace('<p>This is a <b>an even</b> more <i>complex sentence. </i></p>');

/* Will output:
<p><span>This program is </span><a href="beta.html"><span>not stable yet. </span><span>Do not use this in production yet.</span></a></p>
<p><span>This is a </span><b><span>sentence. </span></b></p>
<p><span>This is a <b>another</b> and <i>more complex</i> even <b>super complex</b> sentence.</span></p>
<p><span>This is a <b>a sentence</b>. </span><span>Followed <i>by</i> another one.</span></p>
<p><span>This is a </span><b><span>an even</span></b><span> more </span><i><span>complex sentence. </span></i></p>
*/

我已经花了很长时间实现了这个线程中给出的所有方法。
1.节点迭代器

1. Html解析
   1.平面圆顶
   对于任何一种方法，你都必须找到一种技术，把整个html拆分成句子，然后打包成span（有些人可能想把单词放在span中）。一旦我们这样做了，我们就会遇到性能问题（我应该说像我这样的初学者会遇到性能问题）。

性能瓶颈

我无法将这种方法扩展到70 k-200 k单词，而且仍然在毫秒内完成。
对于包含文本节点和不同元素的复杂html页面，我们很快就遇到了麻烦，而且随着技术债务的不断增加。

最佳方法：Mark.js（根据我的说法）
**注意：**如果你做得正确，你可以处理任何数量的单词。

只需使用Ranges，我想推荐Mark.js和以下示例：

var instance = new Mark(document.body);
instance.markRanges([{
    start: 15,
    length: 5
}, {
    start: 25:
    length: 8
}]); /

这样，我们就可以将整个body.textContent视为字符串，并一直突出显示substring。
这里没有修改DOM结构，你可以很容易地修复复杂的用例，技术债务不会随着if和else的增加而增加。
此外，一旦文本被html5 mark标记高亮显示，您可以后处理这些标记以找出边界矩形。
如果你只是想把html文档拆分成words/chars/lines和更多的文档，也可以看看Splitting.js...但是这种方法的一个缺点是Splitting.js会折叠文档中的额外空格，所以我们会丢失一些信息。

• 谢谢-谢谢