React 实现浏览器自带搜索功能高亮
时间: 2023-08-29 20:04:22 浏览: 55
在 React 中实现浏览器自带搜索功能高亮,可以使用 JavaScript 的 `window.find()` 方法来进行查找,并使用 `Selection` API 来高亮匹配的文本。以下是一个实现示例:
```jsx
import React, { useState, useEffect } from "react";
const SearchHighlight = () => {
const [searchText, setSearchText] = useState("");
useEffect(() => {
const handleSearch = () => {
const selection = window.getSelection();
if (selection.rangeCount) {
const range = selection.getRangeAt(0);
const searchRange = range.cloneRange();
searchRange.selectNodeContents(document.body);
const searchResult = searchRange.toString().indexOf(searchText);
if (searchResult !== -1) {
selection.removeAllRanges();
range.setStart(searchRange.startContainer, searchResult);
range.setEnd(
searchRange.startContainer,
searchResult + searchText.length
);
selection.addRange(range);
}
}
};
window.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.key === "f") {
e.preventDefault();
setSearchText("");
setTimeout(() => {
const searchInput = document.getElementById("search-input");
searchInput.focus();
searchInput.select();
}, 0);
}
});
window.addEventListener("mouseup", handleSearch);
return () => {
window.removeEventListener("keydown", handleSearch);
window.removeEventListener("mouseup", handleSearch);
};
}, [searchText]);
return (
<div>
<input
type="text"
id="search-input"
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
/>
</div>
);
};
export default SearchHighlight;
```
在上面的代码中,我们监听了 `keydown` 和 `mouseup` 事件,当用户按下 `Ctrl+f` 快捷键时,会弹出浏览器自带的搜索框,并且清空搜索文本框中的内容。当用户选中了文本后,会触发 `mouseup` 事件,我们就可以使用 `window.getSelection()` 方法获取选中的文本对象,然后使用 `Selection` API 对选中的文本进行高亮处理。
需要注意的是,上面的代码只是一个简单的示例,还有很多细节需要处理,例如当用户取消搜索后需要清除高亮等。