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.

I'm sure there's a dupe of this out there somewhere...

Cerbrus
– Cerbrus

2017-09-11 14:55:33 +00:00
Commented Sep 11, 2017 at 14:55 — Cerbrus
– Cerbrus, Commented Sep 11, 2017 at 14:55

Rory McCrossan · Accepted Answer · 2017-09-11 14:52:00Z

7

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>

answered Sep 11, 2017 at 14:52

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

demo Over a year ago

as other option - jquery replaceAll or replaceWith function, which doesn't require seting new html to element

Rory McCrossan Over a year ago

@demo true, but that involves removing the original element from the DOM and creating a new one, which will be slower, and would also disconnect any existing event handlers on those elements.

Redu · Accepted Answer · 2017-09-11 15:29:55Z

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>

Collectives™ on Stack Overflow

jquery each function to replace an existing html content

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related