javascript - 防止 Javascript ChildNodes 解析 < 和 >

Question

我今天发现，如果我这样做:

var div = document.createElement('div');
div.innerHTML = "<div>&lt; x</div>";
var node = div.firstElementChild;
var childNodes = node.childNodes;
console.log(childNodes[0].data);

输出是< x 。但我想要我的<不变，因为将其更改为 <弄乱了我编写的解析器。

不更改的推荐方式是什么 <至< ？我能想到的一件事是替换 <与 < ，得出:

var div = document.createElement('div');
div.innerHTML = "<div>&amp;lt; x</div>";
var node = div.firstElementChild;
var childNodes = node.childNodes;
console.log(childNodes[0].data);

输出为< x 。有没有更好的办法？因为在这种情况下，我将使用正则表达式替换 < 来预处理整个文档。与 &lt和>与 > 。但这看起来很老套，谁知道是否有更多的属性被转义并且现在被 childNodes 更改。方法？

更新/说明:

我收到一个 html 字符串 作为解析器的输入。例如，这可以是 <div> The <br> World <span> is &lt; Space </span> </div> 。然后我想为这个 html 编写一个解析器。我首先使用 document.createElement('div'); 创建一个 HTMLElement 。从那里我在 dom 上行走并进行后处理。我特别想找到所有“相邻兄弟文本或br节点”。这就是为什么我用 childNodes 迭代节点。 ，因为反对 children它还返回文本节点。

Answer 1

问题是，如果该字符串代表您所看到的文本，那么它就不是有效的 HTML。在 HTML 中，文字与符号不写为 &，而是写为 &。 & 在正确的 HTML 中具有特殊含义:它用作 HTML 实体名称的一部分。

解决方案是将文本与 HTML 标记分开处理:先添加元素，然后设置其文本内容:

var div = document.createElement('div');
var node = document.createElement('div');
node.textContent = '< x';
div.appendChild(node);
var childNodes = node.childNodes;
console.log(childNodes[0].data);