在工作做我遇到了如下图,搜索关键字并给返回结果的关键字添加样式
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;
才会一行显示