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

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

用了indexOf方法查找位置，substring方法插入内容，直接上JS代码：

先插入标签头，再插入标签尾

//自定义字符串
let str = "你好啊盆友！";
//要搜索修改的字符串
let searchStr = "好";
//用indexOf方法查找“好”在“你好啊盆友！”中的开始位置
let srtStartIndex = str.indexOf(searchStr);
//再用substring方法插入你要的样式（标签头）
var newStr = str.substring(0, srtStartIndex) + '' + str.substring(srtStartIndex);
// console.log(srtStartIndex)
//接着是在“好”的后面插入东东，注意，这里不能直接用上面srtStartIndex加上当前字符串的长度来找到“好”字符串的末尾，
//因为“你好啊盆友！”字符串已经已经变成了介个样子："你好啊盆友！"，下标已经变了，
//所以查找“好”的末尾下标要用拼接后的字符串再次查找“好”的位置加上要修改的字符串长度
let srtEndIndex = newStr.indexOf(searchStr) + searchStr.length;
// console.log(srtEndIndex)
newStr = newStr.substring(0, srtEndIndex) + "" + newStr.substring(srtEndIndex);
// console.log(newStr)
//最后输出应该的介个样子的:你好啊盆友！

经过我再次思考，我发现这样写更好，我先插入后面的标签尾，然后在插入前面的标签头，是不是意味着我不用再次查找‘好’所在的位置，因为“好”的下标压根就没变（你好啊盆友！），第二次再插入标签头就不用再次查找新下标了。

先插入标签尾，再插入标签头

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

最后我们得到了一个字符串："你好啊盆友！"

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