如何将转换后的文本字符串还原为原始HTML布局?

时间:2015-10-09 14:06:16

标签: javascript jquery html split jquery-selectors

此问题源自Jquery - How to replace one word in a div?

的接受答案

下面的代码会检测<div>中的特定字词,将检测到的字词更改为另一个字词,然后使用<div>方法渲染.text()中的所有内容。虽然这是一个可行的解决方案,但是有可能在保留新创建的文本字符串的同时自动将文本字符串转换回原始HTML布局格式吗?

也就是说,新输出应该保留换行符<br/>,但不应仅限于它们(应保留所有HTML)。

HTML:

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

jQuery的:

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);

输出:

8726 N. Royal Ln Irving, TX 75063 new@email.com

期望输出:

8726 N. Royal Ln<br/>
Irving, TX 75063<br/>
new@email.com

Fiddle

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.8.3/jquery.min.js"></script>
<div class="dealer-addy">
  8726 N. Royal Ln<br>
  Irving, TX 75063<br>
  email@aol.com
</div>

1 个答案:

答案 0 :(得分:3)

您应该使用jQuery.html而不是文本。

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

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").html();

value = value.replace(email, "new@email.com"); 
$(".dealer-addy").html(value);

http://jsfiddle.net/pyfbfuo9/