в Internet Explorer pasteHTML вызывает неожиданное поведение?

Question

У меня есть следующий HTML с кодом Javascript (примечание: это работает только в Internet Explorer):

<script type='text/javascript'>
function changeIt() {
 var startTag = "<span class='h' id='123abc'>";
 var endTag = "</span>";
 var htmlStr = document.selection.createRange().htmlText;

 document.selection.createRange().pasteHTML(startTag + htmlStr + endTag);
}
</script>
<style type='text/css'> .h { background: yellow; }</style>
<p><b>Four</b> score and seven years</p>
<input type='button' value='change' onclick='javascript:changeIt();'>

Чтобы использовать эту функцию, просто выделите любую часть текста, которую вы видите на экране, затем нажмите кнопку «Изменить». Теперь странное поведение:

Если вы выделите слово «Четыре» (жирным шрифтом) чем-либо еще после «Четыре», оно выделит жирным все выделение, а это не то, что я хочу. Другими словами, если вы выделите мышью:

Четыре Оценка и семь

затем нажмите кнопку «изменить», она выдаст: Четыре Оценка и семь

<b><span class='h' id='123abc'><b>Four</b> score and seven</span></b>

Я бы хотел вывести это вместо этого: Четыре счета и семь

<span class='h' id='123abc'><b>Four</b> score and seven</span>

Что я делаю не так? Я отвечу либо на Javascript, либо на jQuery.

Примечание: кажется, что цвет фона здесь не отображается должным образом, но моя точка зрения заключается в том, что весь выбор становится жирным, когда я этого не хочу.

Answer 1

Если вы работаете с TextRange, как в примере, вы можете использовать его встроенный метод execCommand для многих задач форматирования. Для примера с цветом фона это будет следующим:

function changeIt() {
    document.selection.createRange().execCommand("BackColor", false, "yellow");
}

Примечание: этот пример только для IE.