有趣的转换“ “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和Node.textContent。请注意innerText如何识别<br>标签之类的东西，并忽略隐藏的元素。

现在，我已经在Firefox 66.0.3 (64bits)上对此进行了测试，如果您在执行操作时渲染/获取属性的元素在document.body上呈现或存在，它仍然有效，您可以查看下面的两个示例：

例1：

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：

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上不存在该元素，它将不起作用（在一些较新的浏览器上），但我不确切地知道它的原因是什么（也许是因为你创建的元素未呈现）：

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;}

无论如何，我来到下一个创建元素的方法，将它附加到body然后removes它，所以你没有任何视觉扰动：

New Implementation:

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有一个很好的阅读