Vue：如何知道用户选择/突出显示的文本并显示多个实例

Question

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

1. 知道用户选择/突出显示的内容（mousedown和拖动文本）
2. 显示突出显示的文本（颜色为上述选定文本的颜色）
3. 可以处理这个的多个实例。

看图像了解我的目标：

从谷歌，StackExchange，中等帖子等我有一个组件，可以找出用户突出显示的文本：

codesandbox

这主要来自freecodecamp的这个媒体帖子，它使用基于slot的方法。

对于高亮文本的实际渲染，我发现的大多数例子都是通过正则表达式并用span或其他东西替换原始文本（例如vue-text-highlight）。

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

所以我想知道是否有人有任何想法克服这一点。

在上面的图像中，我将展示我将使用此高亮组件（链接两个不同的文本实例），但目前我认为图像通过选择和突出显示文本来阐明我的意思。

Answer 1

非常有趣 - 这不是一个很好的尝试，而是一个让你前进的快速尝试。

https://codesandbox.io/s/zw2179y2yl

它支持以下内容：

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

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

如何使用：

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

编辑：

刚注意到几个错误：

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