<!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>
<style>
*{
font-size: 15px;
}
#search{
width: 260px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="search">
<input type="text" id="key">
<button id="btnSearch">查找</button>
<p id="p1">
今天是一个好天气,明天可能会下雨,后天又是一个大晴天,每天都有好心情!
今天是一个好天气,明天可能会下雨,后天又是一个大晴天,每天都有好心情!
今天是一个好天气,明天可能会下雨,后天又是一个大晴天,每天都有好心情!
</p>
</div>
</body>
</html>
<script>
function $$(id) {
return document.getElementById(id);
}
//获取查询按钮并绑定单机时间
var btn = $$('btnSearch')
var key = $$('key')
var p1 = $$('p1')
var initstr = p1.innerHTML
btn.onclick=function(){
//定义一个正则表达式
var reg = new RegExp(key.value,'ig')
//替换内容 (变色)
var res = "<span style='color:red'>"+key.value+"</span>"
p1.innerHTML = initstr.replace(reg,res)
}
</script>
