javascript - innerHTML 和 innerText 之间 ""的有趣转换

Question

我的项目中有一些非常简单的代码，如下所示:

const textToHtml = (text) => {
   const div = document.createElement('div');
   div.innerText = text;
   return div.innerHTML;
}

const htmlToText = (html) => {
   const div = document.createElement('div');
   div.innerHTML = html;
   return div.innerText;
}

这几个月一直正常，前几天遇到一个问题:在某些浏览器中htmlToText('<br>')不再返回'\n'和往常一样，它返回 '' ，所以:

textToHtml(htmlToText('<br>'))
// A few months ago got '<br>'
// but today got '', I lost my '<br>'

在 Mac Chrome 版本中:73.0.3683.75和 Mac Firefox 版本:66.0.3 (64-bit) '<br>'迷路了，但在 Mac Safari 版本中没有:12.1 (14607.1.40.1.4) , 其他版本和平台未测试。

我确信他们几个月前的版本运行良好，我知道解决问题的方法(我可以自己用 RegExp 将所有 '<br>' 替换为 '\n')，我只是想知道有没有其他人遇到过同样的情况？这是浏览器中的错误吗？

Answer 1

MDN 上有一个例子比较 innerText 的文档和 textContent并明确表示:

This example compares innerText with Node.textContent. Note how innerText is aware of things like <br> tags, and ignores hidden elements.

所以，我已经在 Firefox 66.0.3 (64bits) 上测试过了如果您设置/获取属性的来源/位置的元素呈现或存在于 document.body 上，它仍然有效在您执行操作时。您可以查看接下来的两个示例:

示例 1:div document.body 上已存在元素

const textToHtml = (text) => {
   const div = document.getElementById('test');
   div.innerText = text;
   return div.innerHTML;
}

const htmlToText = (html) => {
   const div = document.getElementById("test");
   div.innerHTML = html;
   console.log("Note <br> is parsed to \\n =>", div.innerText);
   return div.innerText;
}

console.log("Output =>", textToHtml(htmlToText(`Some<br>Other`)));

.as-console {background-color:black !important; color:lime;}

<div id="test"></div>

示例 2:div元素动态附加到 document.body 上

const textToHtml = (text) => {
   const div = document.createElement('div');
   document.body.append(div);
   div.innerText = text;
   return div.innerHTML;
}

const htmlToText = (html) => {
   const div = document.createElement('div');
   document.body.append(div);
   div.innerHTML = html;
   console.log("Note <br> is parsed to \\n =>", div.innerText);
   return div.innerText;
}

console.log("Output =>", textToHtml(htmlToText(`Some<br>Other`)));

.as-console {background-color:black !important; color:lime;}

而且，就像你说的，如果 document 上不存在该元素，它将无法工作(在某些较新的浏览器上) ，但是我不知道到底是什么原因(也许是因为您创建的元素未呈现):

示例 3:div document.body 上不存在元素

const textToHtml = (text) => {
   const div = document.createElement('div');
   div.innerText = text;
   return div.innerHTML;
}

const htmlToText = (html) => {
   const div = document.createElement('div');
   div.innerHTML = html;
   console.log("Note <br> isn't parsed to \\n =>", div.innerText);
   return div.innerText;
}

console.log("Output =>", textToHtml(htmlToText(`Some<br>Other`)));

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

无论如何，我已经找到了下一个创建 div 的方法。元素，将其附加到 body然后 removes它。这样，您不会有任何视觉干扰，并且应该适用于所有浏览器:

新实现:

const textToHtml = (text) => {
   const div = document.createElement('div');
   document.body.append(div);
   div.innerText = text;
   const html = div.innerHTML;
   div.remove();
   return html;
}

const htmlToText = (html) => {
   const div = document.createElement('div');
   document.body.append(div);
   div.innerHTML = html;
   const text = div.innerText;
   div.remove();
   return text;
}

console.log("Output =>", textToHtml(htmlToText(`Some<br>Other`)));

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

额外: 关于 innerText 有很好的读物在 the-poor-misunderstood-innerText