How to replace text within a div without losing other formatting below it

Question

I need to change the following text "Error(s) encountered" to "Veuillez vérifier l’information suivante:" I have not been able to do this without losing formatting in the other text.

The items in the unordered list below "Error(s) encountered" is not constant, it changes based on what the users leaves out

<div style="" class="BBFormValidatorSummary" id="PC17178_formWizard_formWizard_ctl08">
Error(s) encountered:
<ul>
<li>Email: Required</li>
<li>Email: Required</li>
<li>Cardholder's Name: Required</li>
<li>Credit Card Number: Required</li>
<li>Credit Card Type:
</ul>
</div>

This is what I tried but it removes the formatting:

$('#PC17178_formWizard_formWizard_ctl08').each(function() {
var text = $(this).text();
$(this).text(text.replace('Error(s) encountered:', 'Veuillez vérifier l’information suivante:')); 
});

Here is the fiddle: http://jsfiddle.net/jelane20/y3Ej4/

Why are you using `.each()` for an ID selector? There can only be one element with that ID, so there's nothing to loop over. — Barmar, Jun 10 '14 at 20:38

score 2 · Answer 1 · answered Jun 10 '14 at 20:38

The problem is you are using .text(), which removes HTML elements from the string. Instead, if you use .html(), it keeps the HTML elements intact:

$('#PC17178_formWizard_formWizard_ctl08').each(function() {
    var text = $(this).html();
    $(this).html(text.replace('Error(s) encountered:', 'Veuillez vérifier l’information suivante:')); 
});

Improved Fiddle: Fiddle

score 1 · Answer 2 · answered Jun 10 '14 at 20:37

1

Use .html() instead of .text().

Demo: http://jsfiddle.net/y3Ej4/2/

answered Jun 10 '14 at 20:37

XCS

27,244
26
101
151

*Why?* (yes, *I* know, but the OP clearly doesn't, or doesn't know the method). – David Thomas Jun 10 '14 at 20:40
I posted a link to the docs of jQuery's `.html()` so he can see exactly what it does. – XCS Jun 10 '14 at 20:58

score 1 · Answer 3 · edited May 23 '17 at 11:49

1

Simply use .html instead.

Alternatively, you can attempt to find the first text node and modify that directly. This would be slightly safer than modifying the entire HTML block, as then we can be sure we're not replacing something unintended.

edited May 23 '17 at 11:49

Community

1
1

answered Jun 10 '14 at 20:38

mpen

272,448
266
850
1,236

score 1 · Answer 4 · answered Jun 10 '14 at 20:40

Put a span around the text, so you can select it by itself.

<div style="" class="BBFormValidatorSummary" id="PC17178_formWizard_formWizard_ctl08">
<span class="error_prefix">Error(s) encountered:<span>
<ul>
<li>Email: Required</li>
<li>Email: Required</li>
<li>Cardholder's Name: Required</li>
<li>Credit Card Number: Required</li>
<li>Credit Card Type:
</ul>
</div>

Then you can do:

$("#PC17178_formWizard_formWizard_ctl08 .error_prefix").text('Veuillez vérifier l’information suivante:');

I do not have access to the HTML for this – Jenny Jun 10 '14 at 20:45 — Jenny, Jun 10 '14 at 20:45

How to replace text within a div without losing other formatting below it

4 Answers4