html实现页面内查找
时间: 2023-12-23 18:17:51 浏览: 43
要在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.findText(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()`和`findText()`方法来进行查找。
注意:这只是一个简单的示例,实际应用中可能需要更多的逻辑和样式来满足你的需求。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)