如何从highlight.js元素中获取纯文本？编辑场景下的实现方法

这问题我之前做在线代码编辑器的时候也踩过坑，innerHTML确实会把嵌套的<pre>、<code>这些标签都带回来，要拿到干净的纯文本其实有几个简单靠谱的办法：

方法1：直接获取<code>元素的纯文本 #

你的核心内容都在id="script_code"的<code>标签里，直接针对这个元素用textContent就能拿到不带任何标签的纯代码：

// 定位到目标code元素
const codeElement = document.getElementById('script_code');
// 提取纯文本格式的代码
const pureCodeText = codeElement.textContent;

textContent会完整保留代码里的换行、空格等格式，完全符合代码编辑场景的需求，比innerHTML靠谱太多。

方法2：获取整个可编辑区域的纯文本 #

如果需要提取整个contenteditable="true"的.ex1容器里的所有纯文本，同样用textContent即可：

const editableDiv = document.querySelector('.ex1');
const fullPureText = editableDiv.textContent;

小提醒：别用innerText替代 #

虽然innerText也能拿到文本，但它会受元素CSS样式影响（比如隐藏的文本会被忽略），而textContent会返回所有文本内容，不管样式，对代码场景来说更稳定。

额外优化：避免意外标签 #

如果用户编辑时不小心输入了<>这类字符产生意外标签，你可以在获取文本后做个简单的转义处理，不过这属于进阶优化，核心的纯文本提取还是靠textContent就够了。

内容的提问来源于stack exchange，提问作者ZedZip