javascript 前端通过JQuery对富文本编辑器内容高亮

style="color: rgb(47, 79, 79);">as

style="color: rgb(47, 79, 79); font-size: 13px;">dasdz

style="color: rgb(47, 79, 79); font-size: 13px;">xvxcvx

style="color: rgb(47, 79, 79); font-size: 13px;">w

style="color: rgb(47, 79, 79); font-size: 13px;">qe开心

这是一段富文本编辑器内容的html代码。

asdasdzxvxcvxwqe开心

上边是在富文本编辑器里显示的内容

如果说需要将这些代码按照关键词高亮，那就需要对html代码进行操作，比如高亮zx

在文本框里，asdasdzxvxcvxwqe开心，zx里连接在一起的，可以直接通过indexOf()找到索引的位置，但是对于富文本编辑器的html代码，不是很好找。于是我想到了如下的方法

$('#question-content').find('*').addBack().contents().each(function () {

if (this.nodeType === 3) {

if ($(this).text().length > 0) {

$(this).replaceWith($.map(this.nodeValue.split(''), function (char) {

return '' + char + '';

}).join(''));

}

})

用遍历div下的所有文字内容，并将字符串拆开，每个字符用字符包裹起来。

这时，通过jquery提取标签是的所有元素，组成数组

const ppatDomArray$ = []

$('#question-content').find("ppat").each(function () {

if ($(this).children().length === 0) {

ppatDomArray$.push($(this))

}

})

此时的jquery获取到数组和纯文本的索引一样，将所有字符拆成单个进行操作。

金钥匙