Jquery - How to replace one word in a div?

问题:

I have a div that's copied from another location, and I need to change one word in it. This is the 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, then change the email address. However, I'm having trouble working 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 was breaking on split(), so I added the replace() line, and now it breaks on the replace() line. I assume it's breaking because of the line breaks in 'text', but I'm not sure what to do.

回答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>

Here is the demo: http://jsfiddle.net/VS7Qe/166/

回答2:

You can get the lastChild of the div, and use replaceChild to insert the new text you want:

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>

回答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 what the email address you are trying to replace is, 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";

回答4:

This should do what you want ([e-mail] will be replaced with [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);
}