Javascript：如何查找在长段落中选择了特定文本的哪个实例（例如，在一个段落中出现多次的单词）？

Question

我计划开发一个网络应用程序。在应用程序的一部分中，用户从段落中选择文本，然后单击保存按钮。

例如，用户从以下文本中选择“apple”（以粗体显示）：

苹果是苹果属苹果树的果仁。 蔷薇科（蔷薇科）。它是种植最广泛的树种之一 果实，是海棠属众多成员中最广为人知的 是人类使用的。 Malus domestica 树通常被简单地称为 苹果树。

当用户单击保存按钮时，JS 应该将其作为键值对添加到对象中。值应该是选定的文本（在这种情况下是苹果），而键应该是指示它是选定文本的哪个实例的东西。原因是“apple”作为给定段落中的倒数第二个单词再次出现。

类似：

var object = new Object();
var textString = window.getSelection().toString();
object.indicator = textString;

我想跟踪用户选择了哪个“苹果”实例（即所选文本）。 那么是否有可能保留它？

接下来的步骤是存储这个对象，这样当用户再次启动这个页面或回到这里时，我们会告诉他他已经选择了什么。

Answer 1

这个例子没有得到选择了哪个实例（第一个或第二个），但它确实得到了字符串中的偏移索引，这应该足够了。

<div id="content">An apple is the pomaceous fruit of the Malus domestica tree of the rose family (Rosaceae). It is one of the most widely cultivated tree fruits, and the most widely known of the many members of genus Malus that are used by humans. Malus domestica tree is often simple called as an apple tree.</div>

<button onclick="saveSelection()">Save Selection</button>

<script>
    function saveSelection() {
        var selection = window.getSelection();
        var selectedText = selection.toString();
        var selectionInfo = {
            offset: selection.anchorOffset,
            length: selectedText.length,
            text: selectedText
        };
        localStorage["lastSelection"] = JSON.stringify(selectionInfo);
    }

    window.onload = function () {
        var selectionJSON = localStorage["lastSelection"];
        if (selectionJSON) {
            selection = JSON.parse(selectionJSON);
            alert(JSON.stringify(selection) + "\n" + document.getElementById("content").innerText.substr(selection.offset, selection.length));
        }
    };
</script>

Answer 2

要获取哪个实例，您可以使用正则表达式来匹配以前的实例并获取有多少。

var text = "An apple is the pomaceous fruit of the Malus domestica tree of the rose family (Rosaceae). It is one of the most widely cultivated tree fruits, and the most widely known of the many members of genus Malus that are used by humans. Malus domestica tree is often simple called as an apple tree.";

var selection = window.getSelection();
var textString = selection.toString();
var previousText = text.substr(0, Math.max(selection.anchorOffset, selection.focusOffset));

//Escape special regex characters, http://stackoverflow.com/a/6969486/3492895
var textRegex = textString.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");

//Matches all instances, including current one
var instance = previousText.match(new RegExp(textRegex, "g")).length;

alert("Instance: " + instance);

工作示例：http://testnaman.neocities.org/quicktest6.html