替换的方式有很多,但是需要在HTML页面进行渲染就是需要其他的操作了
替换方法
// 替换
this.search_key = word;
const reg = new RegExp(this.search_key, 'g'); //正则表达式全局替换
element.content = words.toString().replace(reg, '<span style=\"color:red\">' + this.search_key + '</span>');
//这种替换之后还是字符串,不是页面效果
替换加高亮-ionic4
/**
* 高亮显示关键字
*/
sLight(word, contentId) {
// 渲染词汇
const content = document.getElementById(contentId);
// 替换
const values = content.innerHTML.split(word);
// 通过替换加入相应的样式并渲染
content.innerHTML = values.join('<span style="background:red;" class="keywordcolor">' + word + '</span>');
}
/**
*清空高亮显示
*/
cSelection() {
const spanId = document.getElementsByClassName('wordcolor');
if (spanId !== null) {
for (let i = 0; i < spanId.length; i++) {
// 为清空样式只是实现了将背景色替换为空
spanId[i].setAttribute('style', 'background:""');
}
}
}
其他
上面的contentID是动态生成的所以contentId是自增长的这HTML页面设置的时候需要进行绑定,获取HTML的id.如果是遍历产生HTML页面也可以轻松的高亮显示
感谢您的阅读~~