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

Question

此问题源自

的已接受答案

下面的代码将检测 <div> 中的特定单词，将检测到的单词更改为另一个单词，然后使用 .text() 方法渲染 <div> 中的所有内容。虽然这是一个可行的解决方案，但是否有一种方法可以在保留新创建的文本字符串的同时自动将文本字符串转换回原始 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>

Answer 1

您应该使用 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/

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

How to revert a converted text string back to original HTML layout?

html

javascript

jquery

split

jquery-selectors