javascript - contentEditable DIV 中的大量替换

Question

我已经搜索了几天，但我找到的所有内容都是选定的文本。我需要“粗体”竞争编辑 DIV 中与“test”匹配的所有单词。

我一直在搞乱从DIV获取innerText并用粗体更改这些单词，但是光标丢失了，当再次用innerHTML惰性化更改时，光标移到开头。所以我开始搜索直接在 DIV 上进行这些更改，我唯一找到的是 execCommand，但据我所知，您必须首先选择文本，然后一一进行更改。我想阅读所有 DIV 并即时进行更改，这可能吗？有没有办法将 execCommand 与正则表达式结合起来？

请给我一些光明! :)

Answer 1

如果你想将 contenteditable div 内的单词加粗，相当于放置 <strong>给定单词周围的标签。

所以，我相信你的问题可以通过首先定义一个正则表达式来解决，并使用全局的“g”标志

var boldText = "test"
var testRegEx = new RegExp(boldText, "g")

然后，其中 $div 是代表您要修改其内容的 div(或那个)集合的 JQuery 对象:

$div.html($div.html().replace(textRegEx,"<strong>" + boldText + "</strong>"))