JS-查询高亮匹配关键字

最新推荐文章于 2025-06-13 09:43:30 发布

原创最新推荐文章于 2025-06-13 09:43:30 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#highlight

本文分享了一种基于项目需求的个性化搜索关键字高亮显示方法，通过简单的代码实现了搜索框中关键字的匹配并进行颜色高亮，展示了实现原理及代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于项目的个性化需求，根据搜索框的关键字匹配加颜色高亮显示，折腾半天后总算实现了功能，松了一口气，小有成就感。现将代码分享如下，其实不难，刚开始还在网上找资料正则匹配，往复杂的方向跑了。。。回过头来反而用不复杂的方法实现了，不禁感慨，有时敲代码就是这样，蓦然回首，其实就简单几行代码。好了，嘴碎完上效果图和代码。

效果图

代码

请注意：以下代码是截取实现功能部分，各位小伙伴能看懂实现原理即可。

var searchVal= $('#searchVal').val();

function(cellval){
    if(cellval.indexOf(searchVal) !== -1){
	    var newVal = cellval.replace(searchVal, "<font color='blue'>" + searchVal+ "</font>");
	    return (newVal);
    }else{
	    return (cellval);
    }
}