JavaScript - как обернуть текстовые блоки в <span>, содержащие HTML-теги в IE

Question

Я не могу понять это в Internet Explorer, но я хочу иметь возможность обернуть текстовый блок тегами, которые содержат различные HTML-теги в нем.Я пишу функцию выделения, при которой вы выделяете текст мышью, а выделенный фрагмент оборачивается тегом <span>.Например, рассмотрим следующий текстовый блок (в качестве входных данных):

<p>Lorem <i><b>ipsum dolor</b> sit amet</i>, consectetur <b>adipiscing elit</b>. Morbi</p>
<p></p>
<p>mperdiet, augue id sagittis porta, leo leo...</p>

Я хочу, чтобы вывод был (если вы должны выделить все целиком):

<p><span class='id1 highlight'>Lorem </span><i><b><span class='id1 highlight'>ipsum dolor</span></b><span class='id1 highlight'> sit amet</span></i><span class='id1 highlight'>, consectetur </span><b><span class='id1 highlight'>adipiscing elit</span></b><span class='id1 highlight'>. Morbi</span></p>
<p></p>
<p><span class='id1 highlight'>mperdiet, augue id sagittis porta, leo leo...</span></p>

(ивыделение может быть что-то вроде: .highlight{background-color:yellow} например)

Я извлекаю строку, используя: htmlStr = document.selection.createRange().htmlText;

Лучшее, что я могу до сих пор выяснить, это использовать:

document.selection.createRange().pasteHTML( "<span class='id1 highlight'>" + htmlStr + "</span>" );

edit: я также хочу назначить другой класс для выделения для целей отслеживания (в данном случае id1).

Answer 1

Это сложно достичь в общем случае (представьте, что выборки пересекают границы элементов: один <span> не может использоваться для окружения такого выбора). Вы можете использовать document.execCommand(), чтобы сделать это во всех основных браузерах. Смотрите мой ответ на похожий вопрос здесь: Как выделить текст объекта DOM Range?

UPDATE

Чтобы обернуть весь выбор в <span> s определенным классом, вы можете использовать модуль применения класса *1013* моей библиотеки Rangy . Работает во всех основных браузерах. Однако каждый объект applier имеет дело только с одним классом, поэтому вам нужно использовать два для вашего случая. Пример кода:

<script type="text/javascript">
    var highlightApplier, idApplier;

    window.onload = function() {
        rangy.init();
        highlightApplier = rangy.createCssClassApplier("highlight", true);
        idApplier = rangy.createCssClassApplier("id1", true);
    });

    function toggleHighlight() {
        highlightApplier.toggleSelection();
        idApplier.toggleSelection();
    }
</script>

<input type="button" value="Toggle highlight"
    onclick="toggleHighlight();">