如何提取quill.js生成的代码块纯内容并执行eval()函数

你需要完成两个核心处理步骤，就能拿到用户输入的原始可执行代码：

• 第一步：剥离包裹代码的<pre>等冗余HTML标签，只保留标签内部的文本内容
• 第二步：对文本里的HTML转义字符做反转义，还原成原始代码符号

可直接复用的实现代码 #

function extractPureCode(quillOutputHtml) {
  // 新建临时DOM节点承载Quill输出的内容，避免正则匹配标签的误判问题
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = quillOutputHtml;
  // 定位到代码块pre标签，取内部文本（自动剥离所有HTML标签）
  const codeBlock = tempContainer.querySelector('pre.ql-syntax');
  if (!codeBlock) return '';
  // textContent会自动完成HTML转义字符的还原，同时保留代码原有换行、缩进格式
  const pureCode = codeBlock.textContent.trim();
  return pureCode;
}

// 对应你给出的测试用例
const quillOutput = `<pre class="ql-syntax" spellcheck="false">console.log('hello world') ;
if(2&lt;3 &amp;&amp; 2+6==8)
{
  alert('i am an alert') 
}
</pre>`;

const executableCode = extractPureCode(quillOutput);
console.log(executableCode);
// 输出结果即为用户原始输入的完整代码，可传入执行逻辑调用

注意事项 #

重要安全提示：直接对用户输入的内容调用eval()存在极高的XSS、恶意代码注入风险，如果是面向公网用户的功能，务必增加代码沙箱隔离机制，不要直接在主页面上下文执行任意用户输入的代码。

• 不要用简单正则匹配替换HTML标签，遇到代码内容里本身包含<、>这类和HTML标签重合的符号时，正则替换很容易误删代码内容，用DOM原生API取textContent是最稳妥的方案，不会破坏代码本身的内容。
• 如果你编辑器实例里存在多个代码块，遍历所有pre.ql-syntax节点逐个提取即可。

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