js实现匹配到文字设置为红色
html
<div class="search-text">
<el-input placeholder="请输入关键字" v-model="searchInput" class="searchinput">
<el-button type="primary" slot="append" icon="el-icon-search" @click="handleSearch">搜索</el-button>
</el-input>
<div class="resultcount">为您找到{{ count }}条符合条件</div>
<ul class="resultItem">
<li v-for="(v, i) in searchList" :key="i" @click="searchClick(v)"
v-html="changeKeyRed(v.name, searchInput)">
</li>
</ul>
</div>
mothods
/**
* 将关键字变为红色
* @param str 待处理字符串
* @param keyWord 关键字字符串
* @returns {*} 将关键字变为红色加粗后的字符串
*/
changeKeyRed (str, keyWord) {
if (str != null && keyWord != null) {
var substr = "/" + keyWord + "/g";
var replaceStr = str.replace(eval(substr), "<span style='color:red;font-weight:bold'>" + keyWord + "</span>")
return replaceStr;
} else {
return str;
}
},