vue的部分文字选中效果-选中变色
我们在检索或者要突出部分文字重要的时候,都会有选中变色的效果。vue的文字选中变色研究了一下,没有找到很快速的方法。只能把文字字符串变成了list,然后js循环每个字符,把需要变色的字符找到。

<view class="learn_body_all" v-for="info_one1 in info">
<view class="learn_body_all_title1" v-if="info_one1.text" >
{{info_one1.text}}
</view>
<view v-for="info_one2 in info_one1.child">
<view class="learn_body_all_title2" v-if="info_one2.text">{{info_one2.text}}</view>
<view class="learn_body_all_content" v-for="info_one3 in info_one2.child">
<view class="learn_body_all_content1" v-if="type==1 || type==3">
<text v-for="ss in info_one3[4][0]" :class="ss.class">{{ss.text}}</text>
</view>
<view class="learn_body_all_content2">
<text v-for="ss in info_one3[4][1]" :class="ss.class">{{ss.text}}</text>
</view>
<view class="learn_body_all_content3">
<text v-for="ss in info_one3[4][2]" :class="ss.class">{{ss.text}}</text>
</view>
</view>
</view>
</view>【js分割记忆字段,记忆字段是方便学生记忆,这里选中变色效果】
,fenge_jiyiziduan(ziduan_str,fenge_str)
{
let result=[{class:'',text:ziduan_str}];
if(fenge_str)
{
let fenge_arr=fenge_str.split("|");
for(let i in fenge_arr)
{
let this_ziduan=fenge_arr[i];
//console.log(this_ziduan);
if(this_ziduan==ziduan_str)
{
result=[{class:'jiyidian',text:ziduan_str}];
break;
}else{
//存在,不存在
if(ziduan_str.indexOf(this_ziduan)==0)
{
var this_arr=ziduan_str.split(this_ziduan);
result=[];
if(this_ziduan)
{
result.push({class:'jiyidian',text:this_ziduan});
}
for(let j in this_arr)
{
result.push({class:'',text:this_arr[j]});
}
break;
}else if(ziduan_str.indexOf(this_ziduan)>0){
this_arr=ziduan_str.split(this_ziduan);
result=[];
let num=0;
for(let j in this_arr)
{
num++;
if(this_arr[j])
{
result.push({class:'',text:this_arr[j]});
}
if(num!=this_arr.length)
{
result.push({class:'jiyidian',text:this_ziduan});
}
}
break;
}
}
}
}
//console.log(result);
return result;
}
