关键词搜索高亮显示

最新推荐文章于 2023-03-15 19:00:28 发布

面壁思过程

最新推荐文章于 2023-03-15 19:00:28 发布

阅读量877

点赞数

分类专栏： js 文章标签： js搜索关键词高亮

本文链接：https://blog.csdn.net/Candy_mi/article/details/81040297

版权

js 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery-1.11.1.min.js"></script>
</head>
<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 oContent = $('#box').html(); 
 
        $('#btn').click(function(){  
            var val = $('#testTxt').val();  
            var findText = oContent.split(val);   //以查找关键字作为拆分成数组
            console.log(findText);  
            var result= findText.join('<span style="color:red;">' + val + '</span> '); //在拆分的数组后加入span并转化成字符串 
            console.log(result);
            $('#box').html(result); 
        }) 

  
    </script>

 

</html>

面壁思过程

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关键词搜索高亮显示

代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script src="jquery-1.11.1.min.js"&g
复制链接

扫一扫

专栏目录