Как выбрать произвольный текст на странице, используя JavaScript?

Question

Допустим, у меня есть contentEditable div, чтобы пользователь мог редактировать и изменять текст и элементы внутри него. Как я могу произвольно изменить выбор в этом div с помощью JavaScript? Под «изменить» я не имею в виду «изменить содержимое того, что выбрал пользователь», я имею в виду на самом деле изменить то, что выбрано После этого пользователь должен иметь возможность печатать на выделении, заменяя его чем-то другим.

Это должно учитывать, что я могу выбрать текст между элементами. Например:

<p>Some text <span>goes</span> here.</p>

Я, например, могу выбрать «какой-то текст» или все внутри <p>.

Это необходимо только для работы в Safari / Webkit.

Заранее спасибо. Как нативный разработчик кода, я нахожу DOM и Javascript в целом довольно разочаровывающими.

Answer 1

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

Код, который я использовал, был примерно таким:

var range = document.createRange();
range.setStart( <get the node the selection starts in>, <char offset in that node> );
range.setEnd( <get the node the selection ends in>, <char offset in that node> ); 

window.getSelection().removeAllRanges();
window.getSelection().addRange(range);

Большое спасибо Джеймсу Блэку за то, что он указал мне правильное направление.

Answer 2

Если вам не нужно писать свои собственные, вы можете посмотреть на tinyMCE, http://tinymce.moxiecode.com/,, поскольку это хороший WYSIWYG редактор в javascript.

Чтобы сделать это, вы, вероятно, захотите посмотреть на что-то вроде этого: http://codingtricks.blogspot.com/2009/03/javascript-select-partial-text-in-div.html

Это также может быть полезно: Ошибка ранжирования JavaScript https://developer.mozilla.org/en/DOM/window.getSelection

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

Answer 3

Вы можете использовать document.getElementById('your_text_id').setSelectionRange(start, end); и Math.random(), чтобы генерировать случайные числа для start и end

Answer 4

Хотя ответ @ Лукаса хорош, многое упущено, что позволило бы вам успешно его использовать. Узел, в котором начинается выбор, должен быть точным, а не родительским. В нашем случае мы пытались поместить какой-либо текст в элемент управления TextAngular, а затем выбрать текст, который выглядел как ____, чтобы пользователь мог «заполнить пробел».

Наш ввод был html порядка <p>Some text goes here: _____</p> или

<p>Some partial goes here
<ul>
    <li>Option 1</li>
    <li>_____</li>
</ul>

Чтобы это сработало, нам нужно было написать что-то, чтобы найти подчеркивание в нужном элементе

function find_(node) {
    var i, n;
    // return the node with the _'s
    for(i=0; i < node.childNodes.length; ++i) {
        n = node.childNodes[i];
        console.debug(n);
        if(n.textContent) {
            console.debug(n, n.textContent);
            if(n.textContent.search(/___+/) > 0) {
                return n;
            }
        }
        if(n.childNodes) {
            console.debug(n, n.childNodes);
            n = find_(n);
            if(n) {
                return n;
            }
        }
    }
    return null;
}

Так что, в конце концов, найти узел, удовлетворяющий <get the node the selection starts in>, было намного больше работы, чем это простое предложение заставило меня поверить.

В случае <ul>. узел, содержащий ____, является firstChild узла li.

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

IndexSizeError: Failed to execute 'setStart' on 'Range': There is no child at offset 65.

Когда проблема в том, что они просто смотрят не на тот узел.