“<br>"的有趣转换在innerHTML 和innerText 之间 [英] Interesting conversion of "<br>" between innerHTML and innerText

问题描述

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

There are some very simple codes in my project, look like:

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' 一如既往，而是返回 ''，所以:

It has been working normally for the past few months.A few days ago, there was a problem: in some browsers htmlToText('<br>') no more return '\n' as it always, instead it return '', so:

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) '
' 丢失了，但在 Mac Safari 版本中没有:12.1 (14607.1.40.1.4)，其他版本和平台未测试.

In Mac Chrome version:73.0.3683.75 and Mac Firefox version:66.0.3 (64-bit) the '<br>' got lost, but didn't in Mac Safari version: 12.1 (14607.1.40.1.4), other versions and platforms were not tested.

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

I am sure their version at several month ago worked well, and I know workaround to solve the problem(I can replace all '<br>' to '\n' by RegExp myself), I just wonder has anyone else encountered the same situation? Is this a bug in the browser?

推荐答案

MDN 文档，比较了 innerText 和 textContent，其中明确说明:

There is an example on the MDN documentation that compares innerText and textContent and where explicitly says:

此示例将 innerText 与 Node.textContent 进行比较.注意 innerText 如何知道 <br> 标签 之类的东西，并忽略隐藏元素.

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 在您执行操作时.您可以查看接下来的两个示例:

So, I have tested this on Firefox 66.0.3 (64bits) and it still work if the element from/where you are setting/getting the properties is rendered or exists on the document.body while you perform the operations. You can check the next two examples:

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

Example 1: The div element already exists on the 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

Example 2: The div element is appended dynamically on the 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 中不存在该元素，它将无法工作(在某些较新的浏览器上)，但是我不知道具体是什么原因它(可能是因为你创建的元素没有被渲染):

And, like you say, it won't work (on some newer browsers) if the element don't exists on the document, however I don't know exactly what is the reason about it (maybe it is because the element you create is not rendered):

示例 3: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 然后删除它.这样，您将不会有任何视觉干扰，并且应该适用于所有浏览器:

Anyway, I have come to the next approach that creates a div element, appends it to the body and then removes it. This way, you won't have any visual perturbation and should work nicely for all browsers:

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 的阅读="nofollow noreferrer">穷人被误解的内部文本

Extra: There is a good read about innerText on the-poor-misunderstood-innerText

这篇关于“<br>"的有趣转换在innerHTML 和innerText 之间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！