选择自己想要的文字，文中会显示出来

最新推荐文章于 2024-09-18 19:37:48 发布

原创最新推荐文章于 2024-09-18 19:37:48 发布 · 382 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #html

本文介绍如何在HTML页面中实现输入框搜索功能，通过JavaScript获取用户输入并在段落中高亮显示匹配的内容。适合初学者了解文本搜索和DOM操作。

<!DOCTYPE html>
<html>
<head>
    <title>search</title>
    <meta charset="utf-8">
</head>
<body>
<input type="text" id="text1" /><input type="button" value="查找" id="button1"/>
<p>时光飞逝，日月如梭，白马过隙，管中窥豹，可见一斑，今天天气真好，好像有点头疼。</p>
<script src="js/search.js"></script>
</body>
</html>

function searchKey() {
    //(1)js中获取id为text1的文本框的值
	  var v =document.getElementById('text1').value,
	  //(2)根据标签名获取元素
	  p1 = document.getElementsByTagName("p");
	  p1[0].innerHTML=p1[0].innerHTML.replace(/<[^>]+>/g,'');
	  if (v) {
	  	  //(3)(4)(5)(6)js中定义正则的方法以及替换第一个变量，并将替换的元素加上黄颜色的背景
		    p1[0].innerHTML=p1[0].innerHTML.replace(new RegExp('('+v+')','gi'),'<span style="background: yellow;">'+v+'</span>')
	  }
}
//(7)(8)点击调用方法
document.getElementById("button1").onclick=searchKey;