javascript - 视觉 : how to know what text is selected/highlighted by user and display multiple instances

Question

我正在尝试制作组件 Highlight，它可以:

1. 了解用户选择/突出显示的内容(鼠标按下并拖动文本)
2. 显示突出显示的文本(用颜色为上述选定文本着色)
3. 可以处理这种情况的多个实例。

查看图片了解我的目标:

来自 google、StackExchange、Medium posts 等，我有一个组件可以找出用户突出显示的文本:

codesandbox

这主要取自 freecodecamp 的这篇中篇文章，它使用基于 slot 的方法。

对于突出显示文本的实际呈现，我发现的大多数示例都是通过正则表达式并用跨度或其他内容替换原始文本(例如 vue-text-highlight )来实现的。

这两种方式自然是异曲同工。它可能适用于突出显示一次，但如果将原始文本更改为现在包含 span 元素，则后续或重新选择将不起作用。

所以我想知道是否有人有任何想法来克服这个问题。

在上面的图片中，我展示了我将使用这个突出显示组件来做什么(链接两个不同的文本实例)，但目前我认为图像通过选择和突出显示文本来阐明我的意思。

Answer 1

非常有趣 - 这不是一个很好的尝试，但可以让你快速上手。

https://codesandbox.io/s/zw2179y2yl

它支持以下内容:

• 使用(相对)随机的颜色独立突出显示多位文本。
• 支持在右侧面板中选择文本(然后单击左侧框中相应已突出显示的文本)，它将继承相同的颜色。

很容易扩展以在数组上设置一些 id，然后在左右框之间保存引用。

使用方法:

• 操作:突出显示左侧面板上的一些文本
• 结果:您将在面板下方看到突出显示的文本
• 操作:在右侧面板上突出显示一些文本
• 结果:它将在右侧面板中显示为灰色背景
• 操作:点击面板下方突出显示的文本行之一
• 结果:您之前在右侧突出显示的文本将继承您单击的所选文本的颜色。

编辑:

刚刚注意到几个错误:

• 如果您突出显示一个空格，它就会完全搞砸。
• 高亮是贪婪的，所以如果你高亮“它”，它会在整个文本中用相同的颜色高亮所有“它”的实例，无论它们是否在单词中。