在 Internet Explorer 中，pasteHTML 会导致意外行为吗？

Question

我有以下带有 Javascript 代码的 HTML（注意：这只适用于 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。