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

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

本文关键字：还原 原始 HTML 布局 字符串 文本 转换      更新时间：2023-09-26

这个问题来源于Jquery公认的答案-如何替换div中的一个单词?

下面的代码将检测<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

小提琴

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>

你应该使用jQuery.html而不是text。

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/

相关文章：