无需 javascript 处理即可获取原始 dom 元素 innerHTML

Posted 2023-05-07

【中文标题】无需 javascript 处理即可获取原始 dom 元素 innerHTML

【英文标题】：get original dom element innerHTML without javascript processing

【发布时间】：2012-12-31 00:46:09

【问题描述】：

背景 - 由 TinyMCE 为大型媒体网站背后的企业内部 CMS 提供支持的文章编辑器

html

<p>non-breaking-space: &nbsp; pound: &pound; copyright: &copy;</p>

JS

console.log($('p').html());
console.log(document.getElementsByTagName('p').item(0).innerHTML);

都返回

non-breaking-space:   pound: £ copyright: ©

当我期待时

non-breaking-space:   pound: £ copyright: ©

有些元素的实体被颠倒了（比如磅和版权），有些被保留了（不间断空格）。我需要一种方法来获取所有保留的原始内部 HTML，而不是由浏览器处理的；这可能吗？

这是一个 TinyMCE 插件，它使用 jQuery 处理输入并将其放回。内容是通过数据库加载的，插件正在处理图像标签，根本不想修改文本内容。将某些实体自动更改回原始字符不会有太大问题，但是 -

我们不能修改编辑的输入，即使它是次要的 由于我们网站上的一些浏览器兼容性问题，我们强制这些必须是实体才能保存

我会使用这个答案 - https://***.com/a/4404544/830171 - 但是不能，因为我的 HTML 代码位于用户需要编辑的文本区域内，并且我需要（通过插件）运行 jQuery DOM 操作。

我能想到的一种方法不是使用 jQuery/DOM 来处理我需要更改的图像标签，而是像许多 TinyMCE 插件一样使用正则表达式；但是由于我在regex to pull all attributes out of all meta tags 中因为尝试在 HTML 上使用任何正则表达式而被击落，所以希望有更好的方法！

【问题讨论】：

具有此类文本的元素的console.dir 不显示保留实体的任何属性。甚至调试器（在 Chrome 中）也显示所有元素的 HTML 而不保留实体，所以我猜你不走运。

【参考方案1】：

Tinymce 使用 contenteditable iframe 来编辑内容。这就是为什么 console.log($('p').html()); 将记录其他内容。

使用以下代码获取纯编辑器内容：

tinymce.get('your_editor_id').getBody().innerHTML

【讨论】：

我不会过多关注问题的 TinyMCE 部分，但这通常是如何取回原始 HTML，这里显示了特定于 TinyMCE 插件的相同问题 - ed.onPostProcess.add( function(ed, o) console.log(o.content); // outputs £ console.log($('<tiny-mce-temp>' + o.content + '</tiny-mce-temp>').html()); // outputs £