React在线编译器开发：script内JS代码解析及Blob URL加载问题求助

架构老林

2026-8-17

解决方案：解决React在线编译器中JS代码特殊字符被HTML解析的问题

你遇到的核心问题是：用字符串替换模板时，HTML会把JS代码里的<、>等字符当成HTML标签解析，导致JSX代码被破坏。以下是几个实用的解决方法：

方案1：用DOM API动态生成Script标签（最直接可靠）

放弃字符串替换模板的方式，直接通过DOM操作创建script元素，把用户输入的JS代码作为纯文本插入，避免HTML解析干扰。

步骤示例：

确保页面已引入必要的CDN（React、ReactDOM、Babel，因为JSX需要Babel转译）：

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

用iframe隔离渲染用户代码（推荐，避免污染主页面环境）：

// 获取用户输入的HTML和JS代码
const htmlCode = document.getElementById('html-input').value;
const jsCode = document.getElementById('js-input').value;

// 操作iframe容器
const iframe = document.getElementById('output-iframe');
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

// 初始化iframe基础结构
iframeDoc.open();
iframeDoc.write(`
  <!DOCTYPE html>
  <html>
  <head>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    ${htmlCode}
  </body>
  </html>
`);
iframeDoc.close();

// 动态创建script标签插入JS代码
const script = iframeDoc.createElement('script');
script.type = 'text/babel'; // 指定类型让Babel处理JSX
script.textContent = jsCode; // 用textContent赋值，避免HTML解析
iframeDoc.body.appendChild(script);

方案2：修复Blob URL的使用方式

你之前尝试Blob URL失败，大概率是MIME类型设置错误或插入方式不对，试试这个正确写法：

const jsCode = document.getElementById('js-input').value;

// 创建Blob对象，指定正确的MIME类型
const blob = new Blob([jsCode], { type: 'text/babel' });
const blobUrl = URL.createObjectURL(blob);

// 创建script标签加载Blob URL
const script = document.createElement('script');
script.type = 'text/babel';
script.src = blobUrl;
script.onload = () => URL.revokeObjectURL(blobUrl); // 加载后释放资源

// 插入到iframe中
iframeDoc.body.appendChild(script);

方案3：转义JS代码中的特殊字符（应急可选）

如果坚持用字符串替换模板，需要手动转义特殊字符，但容易遗漏场景，不推荐长期用：

function escapeJsForHtml(jsCode) {
  return jsCode
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/<\/script>/g, '<\\/script>'); // 避免提前闭合script标签
}

// 替换模板时使用转义后的代码
const escapedJsCode = escapeJsForHtml(jsCode);
const finalTemplate = `<script type="text/babel">${escapedJsCode}</script>`;

关键注意事项

必须引入Babel CDN：JSX不是原生JavaScript，需要Babel转译才能在浏览器运行。
优先用iframe渲染：隔离用户代码与主页面，避免全局变量污染和安全问题。
避免用innerHTML插入JS代码：innerHTML会解析HTML标签，直接破坏JSX结构，用textContent才是正确选择。

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

React在线编译器开发：script内JS代码解析及Blob URL加载问题求助

方案1：用DOM API动态生成Script标签（最直接可靠） #

步骤示例： #

方案2：修复Blob URL的使用方式 #

方案3：转义JS代码中的特殊字符（应急可选） #

关键注意事项 #

方案1：用DOM API动态生成Script标签（最直接可靠）

步骤示例：

方案2：修复Blob URL的使用方式

方案3：转义JS代码中的特殊字符（应急可选）

关键注意事项