用HTML节点替换TextNode的子字符串（元素）

Question

我试图迭代一组textNodes并用HTML元素替换一些出现。

例如：

<span>some text<br>without html nodes</span>

转换为

• 节点1：输入文字"some text"
• Node2：类型元素：<br>
• Node3：输入文字："without html nodes"

如何将节点3修改为：

• Node3：输入文字"without"
• Node4：类型元素<span>html</html>
• Node5：输入文字"nodes"

所以，基本上我想替换textnode的子串并将其转换为html节点。有什么想法吗？

Answer 1

Range接口提供了许多方便的节点切片和拼接操作

let span = document.createElement("span")
span.innerHTML = "some text<br>without html nodes"
let text = span.childNodes[2]
let range = new Range()
range.setStart(text, 8)
range.setEnd(text, 12)
range.surroundContents(document.createElement("span"))
console.log(span.outerHTML) // prints <span>some text<br>without <span>html</span> nodes</span>

要计算文本节点中的特定偏移量，您可以使用各种字符串或正则表达式方法。