Question

我有一个脚本，在点击时通过getselection方法获取单词，而不是通过用户选择，然后显示一个警告框，其中包含一些单词，它可以很好地处理一些单词，例如：

{{1}}

它适用于“potrebbe”，但不适用于“Si”......这意味着，当单词位于行的中间时它起作用，但不适用于行的第一个或最后一个单词...

这仅在应用CheckKnowWords函数后才会发生，而不应用此函数，它只能100％工作。

这里的代码很大，所以，为了防止视觉污染，我创建了这个jsfiddle链接：Switches

ON FIREFOX InvalidStateError：尝试使用不可用或不再可用的对象

ON CHROME： Uncaught InvalidStateError：无法在'Range'上执行'surroundContents'：Range已部分选择了非Text节点。

使用时： range.surroundContents（newNode）;

Answer 1

更新了小提琴。 https://jsfiddle.net/ww7uLvd1/8/尝试使用空格分割时始终使用split(/\s+/)

Answer 2

Firefox似乎在此代码中存在许多问题。

1）在某些情况下会抛出错误

根据MDN上Range.surroundContents的文档：

但是，如果Range拆分非Text，则会抛出异常节点只有一个边界点。

它还提出了另一种无论如何都可行的方法。而不是

range.surroundContents(newNode);

你可以使用

newNode.appendChild(range.extractContents());
range.insertNode(newNode);

这样可以避免在开始和结束字词时出错，例如Si或mondo.

2）弹出窗口和标题显示整个html

他们应该显示文字（例如senza而不是<span style="border-radius: 4px;border: 1px solid #ffcccc; background: #ffcccc;">senza</span>）。要解决此问题，您可以将innerHTML替换为innerText。

更多问题

我发现还有一些问题，但这是棘手的问题。 MDN警告Selection.modify是非标准的并且没有计划成为标准，因此您将在浏览器之间获得奇怪的行为，例如：

在Firefox中，标点符号末尾包含标点符号（例如forti,或IATA).）。在Chrome中，这不会发生。此外，带有标点符号的单词似乎在Chrome中正常工作，但在Firefox中却不行（例如，单词L'indice在Chrome中看起来不错，但在Firefox中显示为indice。
在Firefox中，单击识别单词后面的单词将改为选择识别的单词。例如，如果您在ognuno上显示viaggo che ognuno di，则会抓住che这个词，但这不会发生在Chrome中。
单词Henley的独特之处在于它是粗体标签。在短语britannica Henley & Partners中，如果您点击Chrome中的Henley或&，您将获得britannica。在Firefox中，您将获得Henley。

您可能需要考虑更改查找单词的技巧。例如，您已经完成并突出显示您感兴趣的所有单词，将它们包装在span中。您可以使用点击事件来确定您所在的span，然后获取其中的文字，而不是使用范围和选择。如果您的初始检查也排除了标点符号和＆＃34;单词＆＃34;和＆amp ;,然后你可以选择整个内部文本。

我注意到的另一个小问题是HTML使用未转义的&代替&。它可能不会影响这个例子，但一般来说，如果你正确地逃避HTML，你会遇到更少的问题（我认为它主要只是<，>和&，但其他地方有大量的工具和文档。

这里有一个updated fiddle solving the first two issues，但如果你最后做一些重构来解决其他问题，它们可能已经过时了。

点击不能得到消息

2 个答案:

1）在某些情况下会抛出错误

2）弹出窗口和标题显示整个html

更多问题