60 lines
1.5 KiB
HTML
60 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
</head>
|
||
|
||
<body>
|
||
<input type="text" placeholder="请输入关键字">
|
||
<ul></ul>
|
||
</body>
|
||
<script>
|
||
var result = [];
|
||
|
||
var list = [
|
||
'明天天气不好', '天气很好', '我的心情很好', '我不想学编程', '编程是我快乐',
|
||
'明天我想学习', '明天我们出去玩'
|
||
];
|
||
|
||
var mes = document.querySelector("input"),
|
||
ul = document.querySelector("ul")
|
||
|
||
mes.oninput = function () {
|
||
result = []
|
||
if (mes.value.length != 0) {
|
||
for (var i = 0; i < list.length; i++) {
|
||
if (list[i].includes(mes.value)) {
|
||
var spanText = `<span style="color:red">${mes.value}</span>`
|
||
var pushText = list[i].replace(mes.value, spanText)
|
||
result.push(pushText)
|
||
}
|
||
}
|
||
renderHTML()
|
||
} else {
|
||
ul.innerHTML = ""
|
||
}
|
||
}
|
||
|
||
function renderHTML() {
|
||
var html = ""
|
||
console.log(result); // 明天
|
||
// Array.prototype.forEach = function(callback){
|
||
// for（var i =0; i<this,length; i++){
|
||
// callback(this[i],i,this)
|
||
// }
|
||
// }
|
||
result.forEach(function (v, i) {
|
||
html += `<li>${v}</li>`
|
||
})
|
||
|
||
ul.innerHTML = html
|
||
|
||
}
|
||
|
||
</script>
|
||
|
||
</html> |