Javascript 如何从DOM查询文本节点、查找标记模式、用HTML标记替换匹配项以及用新内容替换原始文本节点？ 工具提示的类似标记的功能 问题:

使用Vanilla JavaScript，我想：

更改此项：

<div>
   <p>
        Hello [world]{big round planet we live on}, how is it [going]{verb that means walking}? 
   </p>
   <p>
        It is [fine]{a word that expresses gratitude}.
   </p>
</div> 

应用正则表达式

更改其内部文本

replaced=original.replace（/（\*）（.*）（.*）（\*）/gi，
`${hint}`）；
elem.innerHTML=已替换；

在一个功能中结合在一起：

[].forEach.call（p，elem=>{
让original=elem.innerHTML；
让我们来看看，工具提示，提示
tooltip=original.match（/（\{）（.*）（\}）/gi[0]。切片（1，-1）；
hint=original.match（/（\[）（.*）（\]）/gi[0]。切片（1，-1）；
替换=原始。替换（/（\*）（.*）（\*）/gi，
`${hint}`）；
elem.innerHTML=已替换；
});

但我失败了 当有更多的段落，或者当我只想用两对括号而不是额外的星号以一种简单的方式来写的时候，这真是太糟糕了。当innerTEXT包含更多应包含工具提示的短语/单词时，也会失败。 有什么想法吗？ 你有什么建议吗？ 现有的做法是什么？ 图书馆？

---

脚本？

一个人很容易在提出如何用其他未知HTML内容替换文本节点的正确方法时遇到困难

通用解决方案考虑更复杂的HTML内容

因此，从源节点开始，一步一步地需要在目标文本节点之前插入其每个子节点（文本节点或元素节点）。插入所有节点后，最终会删除目标文本节点

关于，可以在来自的单个

replace

调用中创建标记字符串

//文本节点检测辅助程序
函数IsNoneEmptyTextNode（节点）{
返回(
（node.nodeType==3）
&&（node.nodeValue.trim（）！=''）
&&（node.parentNode.tagName.toLowerCase（）！=='script'）
);
}
//文本节点缩减器功能
函数CollectNoneEmptyTextNode（列表，节点）{
if（isNonEmptyTextNode（node））{
列表推送（节点）；
}
退货清单；
}
函数collectTextNodeList（列表，节点）{
返回数组.from(
elmNode.childNodes
).减少(
CollectNoneEmptyTextNode，
列表
);
}
//最终dom渲染函数
函数replaceTargetNodeWithSourceNodeContent（targetNode，sourceNode）{
const parentNode=targetNode.parentNode；
from（sourceNode.childNodes）.forEach（函数（节点）{
parentNode.insertBefore（节点，targetNode）；
});
parentNode.removeChild（targetNode）；
}
//模板和dom片段呈现函数
函数findMarkdownCreateMarkupAndReplaceTextNode（节点）{
常量regX=（/\[（[^\]]+）\]\{（[^\}]+）\}/g）；
const text=node.nodeValue；
if（注册表测试（文本））{
常量模板=“$1”
const renderNode=document.createElement（'div'）；
renderNode.innerHTML=text.replace（regX，模板）；
replaceTargetNodeWithSourceNodeContent（节点，renderNode）；
}
}
const-elementNodeList=Array.from（document.body.getElementsByTagName（'*'）；
const textNodeList=elementNodeList.reduce（collectTextNodeList，[]）；
forEach（findMarkdownCreateMarkupAndReplaceTextNode）
.as控制台包装{最小高度：100%！重要；顶部：0；}


你好【世界】{我们生活在一个巨大的圆形星球上}，它的【运行】{动词的意思是行走}怎么样？
你好【世界】{我们生活在一个巨大的圆形星球上}，它的【运行】{动词的意思是行走}怎么样？


这是[好的]{一个表示感激的词}。
这是[好的]{一个表示感激的词}。
这是[好的]{一个表示感激的词}。

这个解决方案和答案令人惊讶。在哪里可以了解有关节点及其使用的更多信息？非常感谢。你只需要知道在哪里可以找到这些东西。我也不记得整个规格。如果解决方案令人吃惊，你可以考虑把它标记为被接受的答案。再次感谢你。
<div>
    <p>
        Hello <mark data-toggle="tooltip" data-placement="top" title="big round planet we live on">world</mark>, how is it <mark data-toggle="tooltip" data-placement="top" title="verb means walking">world</mark>?
    </p>
    <p>
        It is fine <mark data-toggle="tooltip" data-placement="top" title="a word that expresses gratitude">thanks</mark>.
    </p>
</div> 

<p>It is fine *[thanks]{a word that expresses gratitude}*!</p>

var p = document.getElementsByTagName('p')

tooltip = original.match(/(\{)(.*?)(\})/gi)[0].slice(1, -1);
hint = original.match(/(\[)(.*?)(\])/gi)[0].slice(1, -1);

replaced = original.replace(/(\*)(.*?)(\*)/gi, 
        `<mark data-toggle="tooltip" data-placement="top" title="${tooltip}">${hint}</mark>`);
elem.innerHTML = replaced;

[].forEach.call(p, elem => {
    let original = elem.innerHTML;
    let replaced, tooltip, hint
    tooltip = original.match(/(\{)(.*?)(\})/gi)[0].slice(1, -1);
    hint = original.match(/(\[)(.*?)(\])/gi)[0].slice(1, -1);
    replaced = original.replace(/(\*)(.*?)(\*)/gi, 
        `<mark data-toggle="tooltip" data-placement="top" title="${tooltip}">${hint}</mark>`);
      elem.innerHTML = replaced;
});