在我朋友遇到的前端基础面试题中又遇到过这样的面试题,给你一个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>