javascript remplacer méthode fonctionne sauf en boucle, il échappe html

Question

Ce code fonctionne parfaitement pour remplacer une chaîne par un html:

$('.active_admin_comment_body').each(function(comment_index){ 
    the_string = $(this).text().replace("#Excitement", "<span style=\"background-color: lightgrey;\">#Excitement</span>"); 
    $(this).html(the_string); 
)}; 

Le problème avec le code ci-dessus est qu'il ne fonctionne que pour remplacer une valeur. Je un tableau de valeurs, de sorte que je l'ai écrit le code suivant à boucle à travers la matrice, puis modifier chaque commentaire avec une valeur dans le tableau:

$('.active_admin_comment_body').each(function(comment_index){ 
    hashtags = ["#Excitement", "#Sad News", "#Moderate"]; 
    comment = $(this); 
    $.each(hashtags, function(index, value){ 
     new_comment = comment.text().replace(value, "<span style='background-color: lightgrey;'>" + value + "</span>"); 
     comment.html(new_comment); 
    }); 
}); 

Le premier bloc de code fonctionne à 100%. Le deuxième bloc de code ne fonctionne que si vous supprimez le code HTML à l'intérieur de la méthode de remplacement. Comment puis-je faire fonctionner le deuxième bloc de code?

Answer 1

Le coupable est la méthode text(). Lorsque vous appelez, il ne retourne que le texte à l'intérieur de l'élément, défaisant par inadvertance un code HTML qui ont déjà été mis en.

$('.active_admin_comment_body').each(function(comment_index){ 
    var hashtags = ["#Excitement", "#Sad News", "#Moderate"]; 
    var comment = $(this); 
    $.each(hashtags, function(index, value){ 
     // I changed text() to html() in the next line. 
     var new_comment = comment.html().replace(value, "<span style='background-color: lightgrey;'>" + value + "</span>"); 
     comment.html(new_comment); 
    }); 
}); 

Vous devez également noter que replace ne remplacera le premier match. Par exemple, "foo bar foo".replace("foo", "baz") renvoie "baz bar foo"; vous pouvez voir que seul le premier foo est remplacé. Si vous souhaitez remplacer toutes les instances, vous devez spécifier l'option g; "foo bar foo".replace(RegExp("foo", "g"), "baz") renvoie "baz bar baz". Dans votre code:

$('.active_admin_comment_body').each(function(comment_index){ 
    var hashtags = ["#Excitement", "#Sad News", "#Moderate"]; 
    var comment = $(this); 
    $.each(hashtags, function(index, value){ 
     // I changed text() to html() and added the RegExp constructor. 
     var new_comment = comment.html().replace(RegExp(value, "g"), "<span style='background-color: lightgrey;'>" + value + "</span>"); 
     comment.html(new_comment); 
    }); 
}); 

Si vous modifiez les éléments à l'intérieur hashtags pour inclure des chaînes qui ne sont pas hashtags, vous devrez peut-être échapper à certains personnages avec un \ afin qu'ils ne sont pas interprétées comme des caractères spéciaux. Voir this link pour une table de caractères qui doivent être échappés. Le signe # n'est pas l'un des caractères spéciaux, donc si vous vous en tenez aux hashtags, vous n'avez pas à vous en préoccuper.

Enfin, au lieu d'utiliser une boucle pour modifier plusieurs chaînes, vous pouvez utiliser un rappel remplacer:

$('.active_admin_comment_body').each(function(comment_index){ 
    var hashtags = ["#Excitement", "#Sad News", "#Moderate"]; 
    var comment = $(this); 
    var new_comment = comment.html().replace(/#(Excitement|Sad News|Moderate)/g, function(tag){ 
     return "<span style='background-color: lightgrey;'>" + tag + "</span>"; 
    }); 
    comment.html(new_comment); 
}); 

Vous remarquerez aussi que j'ai ajouté le mot-clé var à votre code; Cela rend vos variables locales au lieu de globales. Cela ne change pas la fonctionnalité de votre code.

Answer 2

textToReplace est "#Excitement" & replaceWith est "<span style=\"background-color: lightgrey;\">#Excitement</span>" dans votre cas, il deviendra

the_string = $(this).text().replace(/#Excitement/g, "<span style=\"background-color: lightgrey;\">#Excitement</span>"); 

new_comment = comment.text(); 
$.each(hashtags, function(index, value){ 
     new_comment = new_comment.replace(value, "<span style='background-color: lightgrey;'>" + value + "</span>"); 
    }); 
comment.html(new_comment); 

Mise à jour

Answer 3

On dirait que vous en fait juste manque une petite chose. La façon dont votre boucle fonctionnait ne faisait que remplacer la dernière dans le tableau. Changer la dernière valeur dans le tableau l'a fait changer celui qui fonctionnait.

Juste correspondu le hashtag à la chaîne en cours et tout est en ordre.

Seule chose ajoutée à votre code est l'instruction if, en comparant pour une correspondance.

$(function(){ 
 
$('.active_admin_comment_body').each(function(comment_index){ 
 
    hashtags = ["#Excitement", "#Sad News", "#Moderate"]; 
 
    comment = $(this); 
 
    $.each(hashtags, function(index, value){ 
 
    \t if(comment.text().includes(value)){ 
 
     \t new_comment = comment.text().replace(value, "<span style='background-color: lightgrey;'>" + value + " \t \t </span>"); 
 
     comment.html(new_comment); 
 
     } 
 
    }); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='active_admin_comment_body'> 
 
Test1 #Excitement 
 
</div> 
 
<div class='active_admin_comment_body'> 
 
Test2 #Sad News 
 
</div> 
 
<div class='active_admin_comment_body'> 
 
Test3 #Moderate 
 
</div>

https://jsfiddle.net/75e0o36s/

Answer 4

En utilisant html(function) et new RegExp() qui rejoint le tableau en utilisant | pour un OU

var hashtags = ["#Excitement", "#Sad News", "#Moderate"]; 
 

 
$('.active_admin_comment_body').html(function(_, txt) { 
 
    var reg = new RegExp('(' + hashtags.join('|') + ')', 'g'); 
 
    return txt.replace(reg, '<span class="lightgrey">$1</span>'); 
 
});

.lightgrey{ 
 
    background-color: lightgrey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='active_admin_comment_body'> 
 
    Test1 #Excitement 
 
</div> 
 
<div class='active_admin_comment_body'> 
 
    Test2 #Sad News 
 
</div> 
 
<div class='active_admin_comment_body'> 
 
    Test3 #Moderate 
 
</div>