JavaScript:需要查找给定字符串中多个子字符串中的哪一个已被选择(突出显示)

Question

给定任何文本 block ，使用以下示例:

Baseball is a sport. 
A pitcher throws the baseball and the batter hits the baseball.

我需要使用 JavaScript(使用 jQuery 也可以)确定用户选择了“棒球”的三个实例中的哪一个。我有代码将选定的文本包装在一个跨度中，这可能有助于解决这个问题。

假设用户选择第二次出现的棒球，HTML 将类似于以下内容:

Baseball is a sport. 
A pitcher throws the <span class="selection">baseball</span> and the batter hits the baseball.

本质上，我正在寻找一个解决方案，如何确定所选的“棒球”是第 2 次出现(或者在零索引的情况下为 1 次)。

非常感谢任何帮助。

Answer 1

Selection对象会准确地告诉您选择了什么:

var sel = window.getSelection();
if (sel.rangeCount) {
    var range = sel.getRangeAt(0);
    alert("Selection goes from offset " + range.startOffset + " in "
        + range.startContainer.nodeValue + " to offset " + range.endOffset
        + " in " + range.endContainer.nodeValue);
}

对于您的示例，假设您有一个包含所有文本的文本节点，您可以执行以下操作:

if (range.startContainer.nodeType == 3) {
    var textPriorToSelection = range.startContainer.data.slice(0, range.startOffset);
    var priorOccurrences = textPriorToSelection.split(sel.toString()).length - 1;
    alert("Occurrence " + (priorOccurrences + 1) + " of text '" + sel + "'");
}

现场演示:http://jsfiddle.net/kGE7e/