Caractères spéciaux interrompant la création jQuery dom à partir de la chaîne HTML

Question

J'utilise jQuery pour supprimer les balises html indésirables d'un champ de saisie. Cela fonctionne bien, cependant, lorsqu'un caractère spécial est entré comme des entités html telles que ™ (que je veux permettre) je reçois l'erreur suivante lors de la création DOM mouche:

Erreur de syntaxe, expression non reconnue:. ™

L'idée est d'obtenir la chaîne html à partir du champ de texte; créer un élément DOM à partir de celui-ci; ensuite, supprimez uniquement les tags indésirables.

Des données comme: <span>My <b>company</b></span> sont effacées à My <b>company</b> ... ce que j'attends.

Cependant, les données sont entrées comme: My <b>company</b> &trade; pauses

var s = jQuery(this).find('#new-topic').val(); 
 
var $s = jQuery(s); //this is where the error occurs 
 
var $elements = $s.find("*").not("b, strong"); //get elements that are not <b> or <strong> 
 

 
for (var i = $elements.length - 1; i >= 0; i--) { 
 
    var e = $elements[i]; 
 
    jQuery(e).replaceWith(e.innerHTML); 
 
} 
 

 
var finalInput = $s.html();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="new-topic" type="text">

Y at-il de toute façon à permettre des caractères spéciaux dans ce cas?

Answer 1

Le problème est en réalité provoqué lorsque la chaîne capturée à partir du champ de texte n'est pas enveloppée dans une étiquette; par exemple: My <b>company</b> &trade; mais <span>My <b>company</b> &trade;</span> fonctionne. Cela créait également un comportement indésirable lorsque aucune balise n'était entrée dans le champ de texte, par exemple: My company. Pour résoudre ce que je viens toujours envelopper la chaîne dans une balise avant de créer l'élément DOM: s = '<test>'+s+'</test>';

jQuery('#remove-unwanted-tags').on('click', function() { 
 
    var s = jQuery('#new-topic').val(); 
 
    console.log('Before removing unwanted tags: ' + s); 
 
    s = '<test>' + s + '</test>'; //added fix 
 
    var $s = jQuery(s); //this is where the error occurs 
 
    var $elements = $s.find("*").not("b, strong"); //get elements that are not <b> or <strong> 
 
    
 
    for (var i = $elements.length - 1; i >= 0; i--) { 
 
     var e = $elements[i]; 
 
     jQuery(e).replaceWith(e.innerHTML); 
 
    } 
 
    
 
    var finalInput = $s.html(); 
 
    console.log('After removing unwanted tags: ' + finalInput); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="new-topic" type="text"> 
 
<input type="button" id="remove-unwanted-tags" value="remove unwanted tags">

Je ne sais pas si cela est la meilleure façon d'aller sur les balises non désirées de lavage de propriété mais au moins cela fonctionne.