JQuery - How to replace a single word in a div?

Question

I have a div that is copied from another place and I need to change one word in it. This is html:

<div class="dealer-addy">
    8726 N. Royal Ln<br>
    Irving, TX  75063<br>
    [e-mail]
</div>

I need to change the email address, so I'm trying to get the text inside the div and split the string into words, and then change the email address. However, it’s hard for me to work with the inner text.

This is my script:

var address = $dealerInfo.find(".dealer-addy");
var text = $(address).text();
text = text.replace(/\r?\n|\r/, " ");
var words = $(text).split(" ");

It crashed into split (), so I added the replace () line, and now it breaks into the replace () line. I assume that it breaks due to a line break in the "text", but I'm not sure what to do.

Answer 1

var text = $(".dealer-addy").text(); 

function extractEmails ( text ){
    return text.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi) ;
}

var email = extractEmails(text);
var value = $(".dealer-addy").text();

value = value.replace(email, "[e-mail]"); 
$(".dealer-addy").text(value);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="dealer-addy">
    8726 N. Royal Ln<br>
    Irving, TX  75063<br>
    [e-mail]
</div>

Run codeHide result

: http://jsfiddle.net/VS7Qe/166/

Answer 2

lastChild div replaceChild , :

document.querySelector('button').addEventListener('click', function() {
  var div = document.querySelector('.dealer-addy');
  var newEmail = '[e-mail]';
  div.replaceChild(document.createTextNode(newEmail), div.lastChild);
});

<div class="dealer-addy">
    8726 N. Royal Ln<br>
    Irving, TX  75063<br>
    [e-mail]
</div>
<button>Replace email</button>

Hide result

Answer 3

You can do something like this:

JavaScript:

var orignalstring = document.getElementById("dealer-addy").innerHTML;
var newstring = orignalstring.replace("[e-mail]","replaced");
document.getElementById("dealer-addy").innerHTML = newstring;

Html:

<div id="dealer-addy">
    8726 N. Royal Ln<br>
    Irving, TX  75063<br>
    [e-mail]
</div>

But if you don’t know which email address you are trying to replace, you might be better off doing this:

Html:

<div class="dealer-addy">
    8726 N. Royal Ln<br>
    Irving, TX  75063<br>
    <span id="email">[e-mail]</span>
</div>

JavaScript:

document.getElementById("email").innerHtml = "new email";

Answer 4

This should do what you want ( [e-mail] will be replaced by [e-mail] ). Working fiddle: http://jsfiddle.net/bay44km4/3/

HTML:

<div class="dealer-addy">
    8726 N. Royal Ln<br>
    Irving, TX  75063<br>
    [e-mail]
</div>

JavaScript:

var dealerAddressHtml = $(".dealer-addy").html();
var dealerAddressArr = dealerAddressHtml.split("\n");
if (dealerAddressArr.length >=3){
    var emailAddress = dealerAddressArr[3];
    dealerAddressHtml = dealerAddressHtml.replace(emailAddress, "[e-mail]");
    $(".dealer-addy").html(dealerAddressHtml);
}