JavaScript: необходимо найти, какое из нескольких вхождений подстроки было выделено (выделено) в данной строке - PullRequest
Новая
       36

JavaScript: необходимо найти, какое из нескольких вхождений подстроки было выделено (выделено) в данной строке

0 голосов
/ 16 февраля 2012

Для любого блока текста, используя в качестве примера следующее: 

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 в случае нулевого индексирования).

Любая помощь очень ценится.

Ответы [ 3 ]

2 голосов
/ 16 февраля 2012

Объект 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/

0 голосов
/ 16 февраля 2012

Я, вероятно, за это проголосую, так как я использую регулярные выражения для разбора HTML, но я думаю, что он делает то, что вы хотите

0 голосов
/ 16 февраля 2012

После переноса слов в span вы можете сделать это следующим образом, используя JQuery 

<div id="parent">
<span>Baseball</span> is a sport. 
A pitcher throws the <span>baseball</span> and the batter hits the <span>baseball</span>.
</div>
<script>
     $("#parent span").click(function() {
        var index = $("#parent span").index(this);
        alert(index);
        //add class?
        $(this).addClass("selection");
    });
</script>
...