查询段落中的某个字段并且高亮显示

最新推荐文章于 2023-05-10 00:10:45 发布

一个小人儿

最新推荐文章于 2023-05-10 00:10:45 发布

阅读量465

点赞数 1

分类专栏：小白分享

本文链接：https://blog.csdn.net/Ajax_A/article/details/105243230

版权

小白分享专栏收录该内容

29 篇文章 1 订阅

订阅专栏

在我朋友遇到的前端基础面试题中又遇到过这样的面试题，给你一个input 输入框，button按钮以及 p段落标签并且在里面有一大段文字，要求如下
在input中输入任何文字，点击button按钮，都需要在p段落中的文段中找到与input输入的文字完全一样的字符并且高亮显示，逻辑清晰明了，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        main{
            background-color: gray;
            width:500px;
            margin: 50px auto;
        }
        em{
            color: yellow;
            /* animation-iteration-count: ; */
        }
    </style>
</head>
<body>
    <main>
        <input type="text" id="text1">
    <button id="button1" onclick="search()">查询</button>
    <p id="box">The grounds were covered with dark green grass through which straight white stine path .Oh both sides of the path were planted what I believed to be poinsetting. Now the flowers were surrounded by pinkish leaves instead of bright red ones as they should have been.Trimmed with light light green edges,the leaves looked delivcate and charming.Along the long path I often took a stroll which would take me to a wide terrace. where 1 could take me to a wide terrace. where 1 could watch the enchanting glow of sunset and occasionally catch the sight of a train pulling and hooting on ites way south ward.</p>
    </main>
    <script>
        var text1 = document.getElementById("text1");
        var button1 = document.getElementById("button1");
        var textBox = document.getElementById("box");
        let text = textBox.innerHTML;
        function search(){
            if(!text1.value){
                alert("不能为空")
            }
            textBox.innerHTML = text;
            let newHTML = textBox.innerHTML.split(text1.value).join(`<em>${text1.value}</em>`);
            textBox.innerHTML = newHTML;
        }
        var a = [1,2,3]
        var b = a;
        a.push(4);
        a.push(5);
        console.log(a,b)
        
        console.log(((x,y)=>x+y)(1,2))
        console.log(typeof new Number(1))
        console.log("asd".startsWith("a"))
        "asd".slice
    </script>
</body>
</html>

一个小人儿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
查询段落中的某个字段并且高亮显示

在我朋友遇到的前端基础面试题中又遇到过这样的面试题，给你一个input 输入框，button按钮以及 p段落标签并且在里面有一大段文字，要求如下在input中输入任何文字，点击button按钮，都需要在p段落中的文段中找到与input输入的文字完全一样的字符并且高亮显示，逻辑清晰明了，直接上代码<!DOCTYPE html><html lang="en">&lt...
复制链接

扫一扫