позиция выбора выделенного текста div с использованием JavaScript

Question

Мне нужно получить позицию выделенного текста внутри не редактируемого содержимого div (не текстовой области, не редактора rtf, просто простой div)

Я хочу сделать это для того, чтобы пользователи могли выбирать фрагменты статьи и «выделять ее», оборачивая ее в промежуток с другим фоном и, конечно, статья строится с помощью div и / или ps. и т. д., а не текстовые или rtfs

Есть идеи?

P.s. Вы также можете использовать jQuery: D

P.s.s. Мне нужна позиция выбора, а не сам выбор. Ака: это начинается с индекса I до индекса J. Мне это нужно, потому что обычный метод поиска текста в родительском элементе не всегда возвращает уникальный результат, который будет отстой:)

Answer 1

Если вы просто хотите изменить фон выделенного текста, самый простой способ сделать это - использовать document.execCommand().Смотрите мой ответ здесь: Изменить CSS выделенного текста, используя Javascript

Answer 2

//Wrap selected text in span tags with the class 'hl'
//Take some action after (in this case, a simple alert)
$("p").live("mouseup",
    function() {
        selection = getSelectedText(); 
        if(selection.length >= 3) {
            $(this).html($(this).html().replace(selection, $('<\/span>').attr({'class':'hl'}).html(selection).parent().html()) );
            alert(selection);
        }       
    }
); 

//Grab selected text
function getSelectedText(){ 
    if(window.getSelection){ 
        return window.getSelection().toString(); 
    } 
    else if(document.getSelection){ 
        return document.getSelection(); 
    } 
    else if(document.selection){ 

        return document.selection.createRange().text; 
    } 
} 

Код отсюда: http://esbueno.noahstokes.com/post/92274686/highlight-selected-text-with-jquery

Answer 3

Ну, хотя вы нашли решение проблемы, указанной в вашем втором абзаце, я не думаю, что ответ на ваш главный вопрос был дан. :)

Объект Выделение имеет свойство с именем anchorOffset , которое дает именно то, что вы просили (положение выделенного текста в элементе). Приведенная выше ссылка расскажет вам о том, какие браузеры его поддерживают, я боюсь, что IE <9 не сможет. </p>

function show_selected()
{
    var sel = selection();
    console.log(sel.anchorOffset + ':' + sel);
}

Теперь, если вы связываете show_selected, скажем, mouseup, вы увидите смещение и выделенный текст, напечатанный на консоли js.

Функция selection может быть следующей, кросс-браузерной:

function selection()
{
    var sel;
    if(window.getSelection){
      sel = window.getSelection()
    }
    else if(document.getSelection){
      sel = document.getSelection()
    }
    else if(document.selection){
      sel = document.selection.createRange()
    }
    return sel
}

Answer 4

Для получения позиции выбора, попробуйте следующие ссылки:

http://bytes.com/topic/javascript/answers/153164-return-selectionstart-div

Установить позицию курсора на contentEditable

Answer 5

Вы можете проверить, выделен ли текст, запустив:

window.getSelection and document.getSelection() and  document.selection 

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