提取 HTML 包含文本节点而不对它们进行编码

Question

我有以下 HTML:

var html = jQuery('#parent').html();
console.log(html)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child"></div>
  5 > 3
</div>

我执行 jQuery('#parent').html(); 并得到以下字符串：

'<div id="child"></div>
 5 &gt; 3'

我想获取以下字符串：

'<div id="child"></div>
 5 > 3'

如何实现？

请注意，我不会提前知道文本节点的值。我只是不想将文本节点的值（如果存在的话）编码成某个 html 实体名称。

这个问题不是 How to decode HTML entities using jQuery? 的重复 因为 前面提到的 post 不是回答这个问题.

当前的问题不是关于如何将 > 之类的 html 实体名称解码为 >。这很简单。

当前的问题是关于提取 HTML 可能包含文本节点可能包含可编码值而我不我不希望这些值中的任何一个以任何方式成为 formatted/encoded。

Answer 1

试试这个，通过强制 jQuery 解码不会附加到 DOM 的元素上的 html。

var html = jQuery('<textarea/>').html(jQuery('#parent').html()).text();

console.log(html)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child"></div>
  5 > 3
</div>

Answer 2

如果您正在寻找一种普通的 JS 方法，请迭代 parent 的 childnode 并连接它们的值

演示

var html = "";
[].slice.call(document.getElementById("parent").childNodes).forEach(function(item) {
  html += (item.nodeType == 3 ? item.nodeValue : item.outerHTML);
});
console.log(html);

<div id="parent">
  <div id="child"></div>
  5 > 3
</div>

提取 HTML 包含文本节点而不对它们进行编码

extract HTML containing text nodes without encoding them

html

javascript

jquery

encode