Question

我有以下HTML w / 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();'>

要使用此功能，只需突出显示您在屏幕中看到的文本的任何部分，然后单击“更改”按钮。现在，奇怪的行为：

如果你在四个之后用其他任何东西突出显示单词“Four”（带有粗体标签），它将使整个高亮显示为粗体，这不是我想要的。换句话说，如果用鼠标突出显示：

四个得分和七个

然后单击“更改”按钮，它将输出： 四得分，七

<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。

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

1 个答案: