<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
b{
color: red;
}
</style>
</head>
<body>
<h6>查找关键字变色</h1>
<input type="text" placeholder="查找西游记人物" oninput="key(event)">
<ul id="list">
</ul>
<script>
function key(e) {
let keyword=e.target.value //获取到文本框的字符串
if(keyword==""){ //为空退出
list.innerHTML="" //列表为空
return false
}
var arr=[ //数据
{"id":1001,name:"孙悟空"},
{"id":1002,name:"猪八戒"},
{"id":1003,name:"唐三藏"},
{"id":1004,name:"沙和尚"}
]
arr.forEach((v,i)=>{
if(v.name.includes(keyword)){ //查找关键字
v.name=v.name.replace(RegExp(keyword,"g"),`<b>${keyword}</b>`) //正则匹配修改后赋值
//渲染页面
list.innerHTML=`<li>${v.name}</li>`
}
})
}
</script>
</body>
</html>
只能连续搜索不能隔空：比如输入孙空就获取不到信息了，有会的大佬麻烦留言
网友评论