<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<div>
<input id="search" type="text" placeholder="输入当前章节要搜索内容..."/>
<span id="search-btn" style="cursor: pointer">搜索</span>
</div>
<div id="content">
<p>这是要搜索的内容哦！！</p>
</div>
</body>
<script>
var content = $('#content').html();
$('#search-btn').click(function () {
$('#content').html(content);
var searchText = $('#search').val();
if (searchText.length == 0) {
return false;
}
var regExp = new RegExp(searchText, 'g');
var newHtml = content.replace(regExp, '<span id="result" style="background:yellow;color:red;">' + searchText + '</span>');
$('#content').html(newHtml);
var X = $('#result').offset().top;
var Y = $('#result').offset().left;
window.scrollTo(X, Y);
});
</script>
</html>js 实现 ctrl+F查找内容
于 2022-04-08 10:40:25 首次发布
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
