jquery each function to replace an existing html content

Question

I am trying to replace the text inside all the p tags which has a particular class. My html code is

<p class="fb-question">Lorem ipsum dolor sit amet, {{2fill}} ea eos eirmod dissentiet efficiantur. Porro facilisi pericula vim id.</p>
<p class="fb-question">tempor verear eum no. Facer {{2fill}} assum ut eos. Odio mutat vis ad.</p>
<p class="fb-question">Liber noster ei cum. Sed {{2fill}} an electram comprehensam, at hendrerit urbanitas eam,</p>
<p class="fb-question">etiam minimum mentitum cu {{2fill}} cum, ea rebum legimus utroque nam.</p>

and scripts

jQuery('.fb-question').each(function(){ 
    jQuery(this).html().replace('{{2fill}}', '<span id="blank"></span>');
});

but the issue is that the scripts are not going inside the each function even though the html class is present. Can someone tell me what I am missing here.

Answer 1

The issue is because you're replacing the value, but you don't do anything with the result. You need to set it back to the html() method:

$('.fb-question').each(function(){ 
    $(this).html($(this).html().replace('{{2fill}}', '<span id="blank"></span>'));
});

Or better yet, you can give the html() method a function to be run on each element, and avoid the use of each() completely:

 $('.fb-question').html(function(i, h){ return h.replace('{{2fill}}', '<span id="blank"></span>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="fb-question">Lorem ipsum dolor sit amet, {{2fill}} ea eos eirmod dissentiet efficiantur. Porro facilisi pericula vim id.</p> <p class="fb-question">tempor verear eum no. Facer {{2fill}} assum ut eos. Odio mutat vis ad.</p> <p class="fb-question">Liber noster ei cum. Sed {{2fill}} an electram comprehensam, at hendrerit urbanitas eam,</p> <p class="fb-question">etiam minimum mentitum cu {{2fill}} cum, ea rebum legimus utroque nam.</p> 

Answer 2

The innerHTML value is a string type and it is immutable. So the replace method;

var str = "myString";
str.replace("my","your");

won't mutate str however it will return a new one. So, in this particular case you are expected to do like;

str = str.replace("my","your");

On the other hand without jQuery you can always do this with pure JS very simply;

 document.querySelectorAll(".fb-question") .forEach(p => p.innerHTML = p.innerHTML.replace('{{2fill}}', '<span id="blank"></span>')); 

 <p class="fb-question">Lorem ipsum dolor sit amet, {{2fill}} ea eos eirmod dissentiet efficiantur. Porro facilisi pericula vim id.</p> <p class="fb-question">tempor verear eum no. Facer {{2fill}} assum ut eos. Odio mutat vis ad.</p> <p class="fb-question">Liber noster ei cum. Sed {{2fill}} an electram comprehensam, at hendrerit urbanitas eam,</p> <p class="fb-question">etiam minimum mentitum cu {{2fill}} cum, ea rebum legimus utroque nam.</p>