用替换实现全局数据的高亮显示

前言

替换的方式有很多,但是需要在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页面也可以轻松的高亮显示

小结

感谢您的阅读~~