jquery 输入框查找关键字并提亮颜色

最新推荐文章于 2021-11-10 09:39:50 发布

water_Popcorn

最新推荐文章于 2021-11-10 09:39:50 发布

阅读量868

点赞数 1

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/water_Popcorn/article/details/78863954

版权

jquery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <style>
        .pink{
            color:pink;
        }
    </style>
</head>
<body>
<div>
    <p>爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,</p>
    <hr />
    <p>爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,</p>
    <input type="text" id="find"/>
    <button οnclick="search()">查找</button>
</div>
<script>
    function search() {
        var searchText = $('#find').val();  //获取输入框的值
        var regExp = new RegExp(searchText, 'g'); //正则表达式，将输入框中的值放入
        $("p").each(function () {
            var text = $(this).text();  //获取p的文本值
            var newHtml = text.replace(regExp, '<span class="pink">' + searchText + '</span>');  //如果正则表达式的值，在p中存在，则用后面的参数替代原有的值
            $(this).html(newHtml);//更新一下
        });
    }
</script>
</body>
</html>

water_Popcorn

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery 输入框查找关键字并提亮颜色

html lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> script> style> .pink{
复制链接

扫一扫

专栏目录