Javascript: Как найти, какой экземпляр определенного текста (например, слово, которое встречается в абзаце более одного раза) был выбран в длинном абзаце?

Я планирую разработать веб-приложение. В части приложения пользователь выбирает текст из абзаца и затем нажимает кнопку сохранения.

Например, пользователь выбирает "яблоко" (выделено жирным шрифтом) из следующего текста:

Яблоко - это выжимчатый плод дерева Malus domestica семейства розовых (Rosaceae). Это один из наиболее широко культивируемых древесных плодов и наиболее широко известный из многих представителей рода Malus, которые используются людьми. Malus domestica дерево часто просто называют яблоней.

Когда пользователь нажимает кнопку сохранения, JS должен добавить ее к объекту в виде пары ключ-значение. Значение должно быть выделенным текстом (в данном случае яблоком), а ключ должен быть чем-то, что указывает, какой это экземпляр выделенного текста. Причина в том, что "яблоко" снова появляется как второе последнее слово в данном параграфе.

Что-то вроде:

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

Я хотел бы отследить, какой экземпляр "яблока" (т.е. выделенный текст) выбрал пользователь. Так можно ли это держать в курсе?

Следующие шаги должны сохранить этот объект, чтобы, когда пользователь снова запускает эту страницу или возвращается сюда, мы сообщаем ему, что он уже выбрал.

Источник

2 ответа

Решение

Этот пример не получает, какой экземпляр был выбран (1-й или 2-й), но он получает индекс смещения в строке, которого должно быть достаточно.

<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>
Источник

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

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://stackru.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

Источник
Другие вопросы по тегам