javascript - 如何制作像谷歌浏览器查找(Cntrl + F)这样的过滤器组件来检测文本并更改它的背景颜色
问题描述
世界,最后一天我想做一个搜索/过滤组件,其行为类似于谷歌浏览器查找组件,如下所示:
但问题是:
- 我可以找到这个词并将其替换为一个
<span class="text-found">${CHOOSEN_WORD}</span>
但只有前三个字母 - 我无法反转它(从字母中删除样式)
这是我最后的努力:
我有一个Content
像这样命名的组件:
import React, { useEffect } from "react";
import { Typography } from "@material-ui/core";
const Content = ({ pattern }) => {
useEffect(() => {
searchText(pattern);
}, [pattern]);
const searchText = pattern => {
let list = document.querySelectorAll(".text-row");
for (let i = 0; i < list.length; i++) {
let res = list[i].innerHTML.replace(
new RegExp(pattern, "g"),
`<span class="text-found">${pattern}</span>`
);
document.querySelectorAll(".text-row")[i].innerHTML = res;
}
};
return (
<div>
<Typography className="text-row">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</Typography>
<Typography className="text-row">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</Typography>
</div>
);
};
export default Content;
这是我的结果:
解决方案
幸运的是,我正在做一个项目,我在其中使用了 Material UI,所以我能够在我自己的代码库中使用你的组件并对其进行一些调试。
- 我使用打字稿,所以一些类型被添加到你的代码中,如果你不熟悉打字稿,它可能看起来有点奇怪。
- 关于相反的过程,关键是当你的模式改变时清理东西。
- 我使用内部状态进行调试,你当然可以用 React props 替换它。
一个可以正常工作的组件的重写版本:
const Test = () => {
const [pattern, setPattern] = useState<string>("");
useEffect(() => {
let list = document.querySelectorAll(".text-row");
const searchText = (pattern: string) => {
if (!pattern) return;
for (let i = 0; i < list.length; i++) {
let res = list[i].innerHTML.replace(
new RegExp(pattern, "g"),
`<span class="text-found">${pattern}</span>`
);
document.querySelectorAll(".text-row")[i].innerHTML = res;
}
};
searchText(pattern);
const cleanUp = () => {
for (let i = 0; i < list.length; i++) {
let res = list[i].innerHTML
.replace(new RegExp('<span class="text-found">', "g"), "")
.replace(new RegExp("</span>", "g"), "");
document.querySelectorAll(".text-row")[i].innerHTML = res;
}
};
return cleanUp;
}, [pattern]);
return (
<div>
<input onChange={e => setPattern(e.target.value)} />
<Typography className="text-row">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</Typography>
<Typography className="text-row">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</Typography>
</div>
);
};
推荐阅读
- javascript - 在 Safari 上调用 getUserMedia 会导致麦克风在 mac os safari 版本 11 和 12 上静默一秒钟
- c# - 登录中间件异常处理程序
- python-3.x - Podbc + Pyinstaller 问题 pyodbc.InterfaceError IM002
- image - 如果我有本地 docker 镜像。我如何列出上面安装的内容?
- awk - 根据特定字段打印两个文件的信息
- c# - 使用 C# 输出 pdf 中的所有超链接
- mysql - 在 mysql 中写入的 Sidekiq 工作者在单线程时表现更好
- android - 在 SwipeRefreshLayout 中使用 Webview 时出现网页子滚动问题
- r - 如何在多个ID上循环r中的xirr函数
- reactjs - 按钮单击导致组件输出错误