48 lines
1.3 KiB
HTML
48 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Title</title>
|
|
</head>
|
|
<body>
|
|
|
|
<input type="text" placeholder="输入关键字">
|
|
<ul>
|
|
</ul>
|
|
|
|
</body>
|
|
<script>
|
|
var JyList = ['html','学习html','天气很好吗','你很好吗', 'JS学习','不想学习','css测试','明天要测试了'];
|
|
var ul = document.querySelector("ul");
|
|
|
|
var input = document.querySelector("input");
|
|
input.oninput = function () {
|
|
|
|
if (input.value.trim().length > 0) {
|
|
var newList = [];
|
|
|
|
JyList.forEach(function (v,i) {
|
|
if (v.indexOf(input.value) > -1) {
|
|
// 开始下标
|
|
var start = v.indexOf(input.value);
|
|
// 截取字符串的长度
|
|
var length = input.value.length;
|
|
// 生成新的样式
|
|
var newStr = `<span style="color: red">${v.substr(start, length)}</span>`;
|
|
// 替换并保存
|
|
newList.push(v.replace(input.value, newStr))
|
|
}
|
|
});
|
|
|
|
ul.innerHTML = ""
|
|
newList.forEach(function (v) {
|
|
ul.innerHTML += `<li>${v}</li>`
|
|
})
|
|
} else {
|
|
ul.innerHTML = ""
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</html> |