要在HTML
页面内实现
查找功能，可以使用JavaScript。你可以使用JavaScript提供的`window.find()`
方法来实现
页面内
查找。下面是一个简单的示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>
页面内
查找</title>
<script>
function searchWithinPage() {
var searchTerm =
document.getElementById('searchTerm').value;
if (searchTerm) {
if (window.find && window.getSelection) {
document.designMode = "on";
var sel = window.getSelection();
sel.collapse(
document.
body, 0);
while (window.find(searchTerm)) {
document.execCommand("HiliteColor", false, "yellow");
sel.collapseToEnd();
}
document.designMode = "off"; } else if (
document.
body.
createTextRange) {
var
textRange =
document.
body.
createTextRange();
while (
textRange.find
Text(searchTerm)) {
textRange.execCommand("BackColor", false, "yellow");
textRange.collapse(false);
}
}
}
}
</script>
</head>
<
body>
<h1>
页面内
查找示例</h1>
<input type="
text" id="searchTerm" placeholder="输入要
查找的
内容">
<button onclick="searchWithinPage()">
查找</button>
<p>这是一个示例段落，用于演示
页面内
查找功能。</p>
<p>在这个段落中，你可以输入要
查找的
内容，并点击“
查找”按钮来
查找并高亮匹配的文本。</p>
</
body>
</html>
```
上面的示例代码中，我们使用了一个输入框和一个按钮，当用户输入要
查找的
内容并点击按钮时，会调用`searchWithinPage()`函数来执行
查找操作。
在`searchWithinPage()`函数中，我们首先获取用户输入的
查找词，然后使用`window.find()`
方法进行
查找。如果`window.find()`
方法可用，我们将打开文档的设计模式，并通过循环遍历来
查找并高亮匹配的文本。
如果`window.find()`
方法不可用，我们将回退到使用`
document.
body.
createTextRange()`和`find
Text()`
方法来进行
查找。
注意：这只是一个简单的示例，实际应用中可能需要更多的逻辑和样式来满足你的需求。
292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
