JS查询字符串的某几个字给它添加样式、标签、字符串

在工作做我遇到了如下图，搜索关键字并给返回结果的关键字添加样式

indexOf + substring：

我先插入后面的</text>标签尾，然后在插入前面的<text style="color:#E976BA">标签头，这样第二次再插入标签头就不用再次查找新下标了。

var str = "你好啊盆友！";
var searchStr = "好";
var srtEndIndex = str.indexOf(searchStr ) + searchStr .length;
var srtStartIndex = str.indexOf(searchStr );
var newStr = str.substring(0, srtEndIndex) + "</text>" + str.substring(srtEndIndex);
console.log(newStr)
newStr = newStr.substring(0, srtStartIndex) + '<text style="color:#E976BA">' + newStr.substring(srtStartIndex);
console.log(newStr)
//最后输出应该的介个样子的:你<text style="color:#E976BA">好</text>啊盆友！

---

replace:

replace可以直接替换掉搜索字段，很简洁，推荐使用。

var str = "你好啊盆友！";
var searchStr = "好";
var newStr = str.replace(searchStr,`<text style="color:#E976BA">${searchStr}</text>`)
console.log(newStr)

---

最后我们得到了一个字符串："你<text style="color:#E976BA">好</text>啊盆友！"（注意一下text标签是小程序的，自己设置成span标签啥的就好）

• 原生JS的话用document.getElementById("demo").innerHTML=newStr;输出就好了
• 如果是Vue框架的话需要用 <div v-html="newStr"></div>输出
• 如果是React框架的话则需要用<div dangerouslySetInnerHTML = {{ __html:newStr}}></div>输出
• 微信小程序可以用 <rich-text nodes="{{newStr}}"></rich-text>标签输出，或者用wxParse插件输出显示，这里就不多讲wxParse，因为度娘一堆教程，但有一点要注意的是wxParse输出时字符串如果嵌套多了一层标签的话会独占一行，如下图，要加个弹性布局display: flex;才会一行显示