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

【问题标题】：Vue: how to know what text is selected / highlighted by user and display multiple instancesVue：如何知道用户选择/突出显示的文本并显示多个实例
【发布时间】：2019-07-18 02:23:35
【问题描述】：

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

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

查看图片了解我的目标：

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

codesandbox

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

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

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

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

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

【问题讨论】：

你需要保持高亮的状态。然后，您需要保持一个将一个高亮链接到另一个高亮显示的状态，并对它们进行类似的颜色编码。我可能很快就会对此有所了解 - 看起来很有趣
好了，看看下面的答案。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

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

https://codesandbox.io/s/zw2179y2yl

它支持以下：

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

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

使用方法：

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

编辑：

刚刚注意到几个错误：

如果你突出显示一个空格，它就完全搞砸了。
突出显示是贪婪的，因此如果突出显示“it”，它将突出显示“it”的所有实例，无论它们是否在整个文本中以相同的颜色出现。

【讨论】：

感谢您的努力，这绝对是我开始的起点。是的，我也注意到了这些。它还禁止突出显示以前突出显示的文本（例如，“这里是一些文本”和“作为示例的一些文本”，如果“这里是一些文本作为示例”是文本主体，则不能同时突出显示）
如前所述，更重要的是让您了解如何让两者一起运行。您要实现的目标实际上非常复杂，并且需要花费大量时间（天）才能正确完成。祝你好运
是的，不过我真的很感谢您的指导。我会让这个问题再待一会儿，看看有没有其他人想插话:)

【解决方案2】：

在模仿媒体的选择下拉菜单时，我在我的单个文件组件vue-selection-share 中做了同样的事情（关于抓取用户的选择）。这是我为获取用户的选择所做的：

const selection = window.getSelection()

然后，我使用startNode 和endNode 来抓取选择开始和结束的元素：

const startNode = selectionRange.startContainer.parentNode
const endNode = selectionRange.endContainer.parentNode

在我测试选择是否有效后，我将其转换为字符串

this.selectedText = selection.toString()

随后使用this.selectedText 创建handleAction 方法。

随机颜色生成部分可以通过以下简单解决：

data: {
    myColour: '#'+(Math.random()*0xFFFFFF<<0).toString(16)
},
mounted() {
    document.body.style.background = this.myColour;
},
methods: {
    generator: function(){
        // give the selected text an ID before doing this
        let highlightedText = document.getElementById(highlightedText)
        this.myColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
        document.highlightedText.style.background = this.myColour;
    }
}

如果我没记错的话，你可以找到更多 getElementById 和变色 here on mozilla。

我没有时间检查其他答案，但是当您认为他的解决方案更好时，请关注他的答案，因为我的答案是快速写在手机上的。午餐时。

【讨论】：