jQuery text() with replace() doesn't replace the text

Question

I have the following H2:

<h2 id="resetPWSuccess">Password reset instructions have been sent to *|RESETPASSWORDEMAIL|*</h2>

I want to replace the *|RESETPASSWORDEMAIL|* with current email address that I have in the jQuery variable emailAddress.

I have tried the following but it doesn't work:

$('h2#resetPWSuccess').text().replace('*|RESETPASSWORDEMAIL|*', emailAddress).show();

Is there a way to update the h2 text - I prefer one line if possible.

Answer 1

Use this instead :

$('#resetPWSuccess').text(
   $('#resetPWSuccess').text().replace('*|RESETPASSWORDEMAIL|*', emailAddress)
).show();

---

Note that I also removed the h2 from your selector : it's useless and slower than just using the id. When you ask jQuery to search for #resetPWSuccess, it uses the very fast native getElementById function.

From jQuery's source code :

// Shortcuts
if ( (match = rquickExpr.exec( selector )) ) {
    // Speed-up: Sizzle("#ID")
    if ( (m = match[1]) ) {
        if ( nodeType === 9 ) {
            elem = context.getElementById( m );

Answer 2

I'd suggest a different approach:

<h2 id="resetPWSuccess">Password reset instructions have been sent to <span id="resetPWemail"></span></h2>

And the corresponding js:

$('#resetPWemail').text(emailAddress);
$('#resetPWSuccess').show();