时间戳

首页 > 解决方案 >
innerHTML 和 innerText 之间“”的有趣转换

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

问题描述

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

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 版本：迷路了，但在 Mac Safari 版本：没有66.0.3 (64-bit)，其他版本和平台未测试。'<br>'12.1 (14607.1.40.1.4)

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

标签： javascripthtmldom

解决方案

MDN文档中有一个示例，该示例进行了比较innerText，textContent并且明确指出：

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

因此，我已经对此进行了测试，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有很好的阅读

推荐阅读