Jquery - 如何替换 div 中的一个单词？答案

【问题标题】：Jquery - How to replace one word in a div?Jquery - 如何替换 div 中的一个单词？
【发布时间】：2016-01-03 17:12:26
【问题描述】：

我有一个从另一个位置复制的 div，我需要更改其中的一个单词。这是html：

<div class="dealer-addy">
    8726 N. Royal Ln<br>
    Irving, TX  75063<br>
    email@aol.com
</div>

我需要更改电子邮件地址，因此我试图获取 div 中的文本并将字符串拆分为单词，然后更改电子邮件地址。但是，我在处理内部文本时遇到了问题。

这是我的脚本：

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

它在 split() 上中断，所以我添加了 replace() 行，现在它在 replace() 行上中断。我认为它会因为“文本”中的换行符而中断，但我不确定该怎么做。

【问题讨论】：

也许将电子邮件添加到 span 元素会更好？然后改变它的内容？
splice() 方法在这里也可能对您有用。但是只需将电子邮件放入自己的容器中（动态地）就可以了wrap()。

标签： javascript jquery html split jquery-selectors

【解决方案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, "new@email.com"); 
$(".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>
    email@aol.com
</div>

这里是演示：http://jsfiddle.net/VS7Qe/166/

【讨论】：

【解决方案2】：

你可以得到div的lastChild，并使用replaceChild插入你想要的新文本：

document.querySelector('button').addEventListener('click', function() {
  var div = document.querySelector('.dealer-addy');
  var newEmail = 'vitor@stackoverflow.com';
  div.replaceChild(document.createTextNode(newEmail), div.lastChild);
});

<div class="dealer-addy">
    8726 N. Royal Ln<br>
    Irving, TX  75063<br>
    email@aol.com
</div>
<button>Replace email</button>

【讨论】：

原版 JS 没什么问题。究竟是什么“确定”某物是“孩子”，更不用说最后一个孩子了？

【解决方案3】：

你可以这样做：

Javascript：

var orignalstring = document.getElementById("dealer-addy").innerHTML;
var newstring = orignalstring.replace("email@aol.com","replaced");
document.getElementById("dealer-addy").innerHTML = newstring;

HTML：

<div id="dealer-addy">
    8726 N. Royal Ln<br>
    Irving, TX  75063<br>
    email@aol.com
</div>

但如果您不知道要替换的电子邮件地址是什么，您最好这样做：

HTML：

<div class="dealer-addy">
    8726 N. Royal Ln<br>
    Irving, TX  75063<br>
    <span id="email">email@aol.com</span>
</div>

Javascript：

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

【讨论】：

【解决方案4】：

这应该可以满足您的要求（email@aol.com 将替换为 newemail@gmail.com）。工作小提琴：http://jsfiddle.net/bay44km4/3/

HTML：

<div class="dealer-addy">
    8726 N. Royal Ln<br>
    Irving, TX  75063<br>
    email@aol.com
</div>

Javascript：

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

【讨论】：