实现查找关键字高亮显示

最新推荐文章于 2024-05-30 20:38:53 发布

狂野的心跳

最新推荐文章于 2024-05-30 20:38:53 发布

阅读量1.7w

点赞数 10

分类专栏： js 文章标签：高亮文本关键字搜索原生js

本文链接：https://blog.csdn.net/guozhangqiang/article/details/79207480

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

博主在项目期间遇到一个需求，就是搜索关键词时需要高亮显示，我相信很多小伙伴有同样的经历，因此，整理了一下。

没啥说的，直接上代码，很简单的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>实现查找关键字高亮显示</title>
<style type="text/css">
     #box{ 
	    height:200px; 
	    width:500px;
	    margin:50px auto;
	    border:2px solid #eee;
	    text-indent:20px;
    }
    #inpt{
        text-align:center;
    }
    li{
    	list-style-type: none;
    	margin: 10px 0;
    }
           
</style>
</head>
<body>
    <div id="box">
    	<ul>
	    	<li>测试文本1：博主大帅哥一枚，</li>
		    <li>测试文本2：转载收藏此博文的比博主还帅还漂亮。</li>
		    <li>测试文本3：博主有点飘；早晚要挨刀！</li>
    	</ul>
    </div>
    <div id="inpt">
       <input type="text" id="testTxt" placeholder="请输入关键字"/>                          
       <input type="button" id="btn" value="确定"/>
    </div>
    <script type="text/javascript">
        var oBox = document.getElementById("box");  
        var oContent = oBox.innerHTML;
        var testTxt = document.getElementById("testTxt");
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function(){
            var val = testTxt.value;
            var findText = oContent.split(val);
            oBox.innerHTML = findText.join('<span style="color:red;">' + val + '</span> ');
        };

    </script>
</body>
</html>

效果图：

狂野的心跳

关注

10
点赞
踩
37

收藏

觉得还不错? 一键收藏
2
评论
实现查找关键字高亮显示

博主在项目期间遇到一个需求，就是搜索关键词时需要高亮显示，我相信很多小伙伴有同样的经历，因此，整理了一下。没啥说的，直接上代码，很简单的。实现查找关键字高亮显示 #box{ height:200px; width:500px; margin:50px auto; border:2px solid #eee; te
复制链接

扫一扫