css html js 输入搜索内容符合要求变色

最新推荐文章于 2022-03-15 15:03:50 发布

jialan75

最新推荐文章于 2022-03-15 15:03:50 发布

阅读量782

点赞数 2

分类专栏： CSS 文章标签： javascript css html

本文链接：https://blog.csdn.net/jialan75/article/details/122852028

版权

CSS 专栏收录该内容

35 篇文章

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            font-size: 15px;
        }
        #search{
            width: 260px;
            margin: 0 auto;
    
        }
    </style>
</head>
<body>
    <div id="search">
        <input type="text" id="key">
        <button id="btnSearch">查找</button>
        <p id="p1">
            今天是一个好天气,明天可能会下雨,后天又是一个大晴天,每天都有好心情!
            今天是一个好天气,明天可能会下雨,后天又是一个大晴天,每天都有好心情!
            今天是一个好天气,明天可能会下雨,后天又是一个大晴天,每天都有好心情!
        </p>
    </div>

</body>
</html>

<script>
    function $$(id) {
        return document.getElementById(id);        
    }
    //获取查询按钮并绑定单机时间
    var btn = $$('btnSearch')
    var key = $$('key')
    var p1 = $$('p1')
    
    var initstr = p1.innerHTML

    btn.onclick=function(){
        //定义一个正则表达式
        var reg = new RegExp(key.value,'ig')
        //替换内容 (变色)
        var res = "<span style='color:red'>"+key.value+"</span>"    
        p1.innerHTML = initstr.replace(reg,res)
  
    }
</script>