Как получить выделенный текстовый идентификатор и заменить текст с сохранением тегов без изменений с помощью JavaScript?

Question

Я создаю слово за словом инструмент раскраски. Обычно пользователь может выбрать несколько букв из слова и раскрасить их отдельно, поэтому одно слово может иметь 2 или более цветов.

чтобы отслеживать все слова, все они имеют идентификатор, и я хотел знать, как я могу узнать, какие буквы выбраны и какой идентификатор слова есть для выбранных слов, если пользователь выбрал несколько слов, то я должен получить каждое Идентификатор слова с ним.

вот демо: http://jsfiddle.net/FvnPS/29/

я могу получить выбор, но я не знаю, как найти там идентификаторы для выбранных слов.

Answer 1

Получить идентификатор из вашего атрибута data-id, метод tetx из text (). Код только для концепции, не полностью разработан

alert($(this).text() +' ID: '+$(this).data('id'));

РЕДАКТИРОВАТЬ: идентификатор начала / конца

var id = {
    start: null,
    end: null
}


$('word').mouseup(function() {
    alert(getSelectedText() + ' End: ' + $(this).data('id') + ' Start: ' + id.start);
}).mousedown(function(evt) {
    id.start = $(evt.target).data('id')
});

http://jsfiddle.net/8Gqsu/2/

Answer 2

Получить его по атрибуту event.target - см. http://jsfiddle.net/FvnPS/31/

Answer 3

Это даст вам идентификатор первого выбранного слова ( first_id ) и последнего из ( last_id ), очевидно, что все слова между ними также выбраны,Если выбрано только одно слово, оба имеют одинаковое значение.

$('word').mouseup(function(event) {
    var last_id = parseInt($(this).attr("data-id"));
    var first_id = last_id - getSelectedText().split(" ").length + 1;
});

function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}​

http://jsfiddle.net/vTgqW/2/