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

Question

我正在尝试制作Highlight可以：

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

查看图片以了解我的目标：

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

密码箱

这主要取自freecodecamp的这篇中型帖子，它使用了一种slot基于方法的方法。

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

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

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

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

标签： javascriptvue.jsvuejs2vue-component

Answer 1

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

https://codesandbox.io/s/zw2179y2yl

它支持以下内容：

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

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

如何使用：

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

编辑：

刚刚注意到几个错误：

• 如果您突出显示一个空间，它会完全搞砸。
• 突出显示是贪婪的，因此如果突出显示“it”，它将突出显示“it”的所有实例，无论它们是否在整个文本中使用相同的颜色。