Les manipulations de Dom Dom, comment supprimer les tags qui enveloppent ma sélection?

Question

J'essaie de vous expliquer mon "problème". Je voudrais savoir quand je sélectionne une partie de texte, si ce texte est "enveloppé" par des balises html, et en fonction les supprimer.

Par exemple, avec cette phrase:

La voiture est <strong> vert </strong>, et le bateau est noir

Si je sélectionne « vert » et cliquer sur un bouton, je voudrais vérifier si vert est enveloppé par <strong> (pour que ce soit OK), et en fonction supprimer <strong> étiquettes sans supprimer contenant "vert". J'ai essayé de le faire, mais quand j'enlève un enfant et en recrée un, mon nouveau noeud est vide et si j'essaie de mettre du texte directement dans document.createTextNode, mon nouveau noeud apparaît mais les balises <strong> restent.

// Bouton CLICK 
    $('input[type=button].btn_transform').click(function(){ 

var selObj = window.getSelection();  
     var parent=selObj.anchorNode.parentNode; 

     if (parent.nodeName=='STRONG'){  
      parent.removeChild(selObj.anchorNode); 
      var theText = document.createTextNode(selObj); 
      parent.appendChild(theText);    
     } 
    }); 

Je ne suis pas un spécialiste de la manipulation DOM. Pourriez-vous m'aider à résoudre ce problème?

Merci beaucoup pour votre aide précieuse.

Answer 1

Il devrait fonctionner comme vous le voulez en réglant simplement outerHTML du parent (<strong>green</strong>) à sa innerHTML (green), comme ceci:

$('input[type=button].btn_transform').click(function(){ 

    var selObj = window.getSelection();  
    var parent=selObj.anchorNode.parentNode; 

    if (parent.nodeName=='STRONG'){   
     parent.outerHTML = parent.innerHTML; 
    } 
}); 

Answer 2

Vérifiez ce post pour une méthode de sélection qui sélectionne les informations non Quel que soit le navigateur est:

Selecting text in an element (akin to highlighting with your mouse)

Je pense que si vous utilisez la méthode SelectText il devrait fonctionner correctement au lieu de getSelection()

J'espère que ça aide.

Answer 3

en utilisant la plupart du temps jQuery ...

$(document).ready(function() { 
     $("#btn_transform").click(function() { 
      var selectedText = getSelText(); 
      var parentOf = $("strong:contains(" + selectedText + ")"); 
      $(parentOf).each(function() { 
       if (this.tagName == "STRONG" || this.tagName == "strong") { 
        var theElement = $(this); 
        var itsText = $(this).text(); 
        $(this).after(itsText); 
        $(this).remove(); 
       } 
      }); 
     }); 
    }); 
    function getSelText(){ 
     // your chosen 'get selection' method... 
    { 

Le seul problème que vous pourriez avoir est si vous sélectionnez du texte qui apparaît plus d'une fois - donc la fonction correspond à tous les cas de ce texte étant contenu entre les balises <strong> et supprimez-les tous.

peut vous donner quelques idées que je suppose. Rob