练习-查找关键字

最新推荐文章于 2021-11-14 15:51:54 发布

奋斗中的切图猿

最新推荐文章于 2021-11-14 15:51:54 发布

阅读量152

点赞数

分类专栏： js练习题文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44573096/article/details/106725487

版权

js练习题专栏收录该内容

28 篇文章 0 订阅

订阅专栏

效果：
在这里插入图片描述代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    span{
        color:white;
        background-color:red;
    }
    </style>
</head>
<body>
    <p>红烧鸡翅数据传输还是得红烧鸡翅数据传输还是得红烧鸡翅数据传输还是得红烧鸡翅数据传输还是得红烧鸡翅数据传输还是得红烧鸡翅数据传输还是得红烧鸡翅数据传输还是得红烧鸡翅数据传输还是得红烧鸡翅数据传输还是得红烧鸡翅数据传输还是得红烧鸡翅数据传输还是得红烧鸡翅数据传输还是得红烧鸡翅数据传输还是得红烧鸡翅数据传输还是得红烧鸡翅数据传输还是得红烧鸡翅数据传输还是得</p>
    <input type="text" placeholder="请输入要查找的文字">
    <button>高亮显示</button>
    <script>
    var oP=document.querySelector("p");
    // 声明一个自定义属性（或用全局str来保存oP内容）的原因：如果直接修改oP的内容（或用局部str），oP.innerHTML会变成上一次修改的样子再接着修改
    oP.inner=oP.innerHTML;   //oP.inner为自定义属性
    // var str=oP.innerHTML;
    var oTe=document.querySelector("input");
    var oBtn=document.querySelector("button");
    oBtn.onclick=function(){
        // 这样添加的span就是一个span标签，在页面中不显示出来，所以可以直接设置css样式
        oP.innerHTML=oP.inner.split(oTe.value).join("<span>"+oTe.value+"</span>");
        // oP.innerHTML=str.split(oTe.value).join("<span>"+oTe.value+"</span>");
    }
    </script>
</body>
</html>