Переносить выделенные текстовые узлы в промежутки, сохраняя при этом все остальные выделенные узлы - PullRequest
Новая
       68

Переносить выделенные текстовые узлы в промежутки, сохраняя при этом все остальные выделенные узлы

0 голосов
/ 27 мая 2020

Я пытаюсь обернуть все выделенные текстовые узлы в промежутки И сохранить выбранные промежутки. Я знаю один способ добиться этого, но он включает в себя «извлечение» / удаление всех выбранных узлов (промежутков и текста) и их повторную вставку обратно (см. Код ниже). Мне неудобно удалять, а затем повторно вставлять пользовательский контент, мне кажется, что некоторые браузеры не могут повторно вставить контент точно так, как это было.

Есть ли альтернативный лучший способ достичь моей цели - обернуть выделенный текст узлы в промежутках с сохранением всех остальных? 

    var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();

    for (var i=0; i<selectedText.childNodes.length; ++i) {
        var node = selectedText.childNodes[i];
        if (node.nodeType == 3) { // is #text
            var span = document.createElement("span"); 
        span.appendChild(node); 
        selection.insertNode(span);
        }
        else if (node.nodeType == 1) { // is span|other
            selection.insertNode(node);
        }
    }

Пример html, который будет выбран: 

<p>Foo bar <span>baz</span></p>

И пример выбора (выделен жирный текст):

Foo bar baz

Результат html должен быть: 

<p>Foo <span>bar </span><span>baz</span></p>
...