dans Internet Explorer, pasteHTML provoque un comportement inattendu?

Question

je le code HTML suivant w/code Javascript (note: cela ne fonctionne dans 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();'> 

Pour utiliser cette fonction, il suffit de sélectionner une partie du texte que vous voyez sur l'écran, puis cliquez sur le "Changer" le bouton. Maintenant, le comportement étrange:

Si vous mettez en surbrillance le mot «Four» (avec les étiquettes en gras) avec quoi que ce soit d'autre après le Four, cela rendra toute la surbrillance en gras, ce qui n'est pas ce que je veux. En d'autres termes, si vous mettez en surbrillance avec votre souris:

quatre-vingts et sept

puis cliquez sur le bouton "changement", il affichera: Quatre score et sept

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

Je voudrais qu'il produise à la place: Quatre score et sept

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

Qu'est-ce que je fais mal? Je vais prendre une réponse en Javascript ou en jQuery.

Remarque: semble que la couleur d'arrière-plan ne s'affiche pas correctement ici, mais mon point est que toute la sélection devient gras quand je ne le veux pas.

Answer 1

Si vous travaillez avec un TextRange, dans l'exemple, vous pouvez utiliser sa méthode intégrée execCommand pour de nombreuses tâches de mise en forme. Pour l'exemple de couleur d'arrière-plan, ce serait le suivant:

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

Remarque: cet exemple est IE uniquement.