使用 javascript 从文本中获取 DOM 正文

Question

我在使用 getElementsByTagName 从 javascript 代码中提取正文时遇到问题。

var enc1 = '<HEAD></HEAD><BODY>test</BODY>';
var wrapper = document.createElement('div');
wrapper.innerHTML = enc1;
var converted = wrapper.getElementsByTagName("body");
var res = "Body of text: " + converted;

document.getElementById("demo").innerHTML = res;

<div id="demo"></div>

jsfiddle

当我使用 converted 时，我得到 [object HTMLCollection]。当我使用 converted[0] 时，我得到 undefined.

有什么我遗漏的吗？

Answer 1

正如 RobG 在他的评论中所说，div 中不能有 head 或 body 标签。

大多数（即使不是全部）浏览器只会将 "test" 写入您的包装器 div。

您使用代码创建了以下内容：

<div>test</div>

因此当您尝试此行时会发生错误：

var converted = wrapper.getElementsByTagName("body");

包装器中没有 body 标签 div，因此转换后是一个空的 HTMLCollection[]。

Answer 2

<head> 和 <body> 比您日常的 <div> 更特别一点。您只能将它们放置为 <html>.

的直接后代

目前 createElement 无法创建这样的 html 标签，您需要创建一个新的 document，然后使用它来访问其 .body 属性 - .body.innerHTML 得到 HTML.

目前解析整个 HTML 文档的唯一方法是 document.implementation.createHTMLDocument 和 DOMParser。 DOMParser比较新鲜，推荐使用

const enc1 = '<HEAD></HEAD><BODY>test</BODY>';
const newDocument = (new DOMParser).parseFromString(enc1, 'text/html');
const converted = newDocument.body.innerHTML;
const res = "Body of text: " + converted;

document.getElementById("demo").innerHTML = res;

<div id="demo"></div>

Answer 3

<body> 标签不应该在 div 内。你可以这样做来提取正文中的文本：

const bodyText = document.body.innerHTML

使用 javascript 从文本中获取 DOM 正文

Getting DOM body from text using javascript

javascript

html

getelementsbytagname