在HTML页面内实现代码块的编辑和运行功能，能够让用户在不离开当前页面的情况下验证代码逻辑，提升开发和学习效率。该功能主要依赖HTML的编辑容器、JavaScript的代码执行能力以及结果展示区域配合实现。
基础页面结构搭建
首先需要搭建包含代码编辑区、运行按钮和结果展示区的基础页面结构，编辑区可以使用contenteditable属性的元素或者textarea实现，这里选择textarea保证代码格式的可控性。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML内代码编辑运行</title>
<style>
.container {
width: 800px;
margin: 20px auto;
}
.code-area {
width: 100%;
height: 200px;
padding: 10px;
border: 1px solid #ccc;
font-family: monospace;
font-size: 14px;
resize: vertical;
}
.run-btn {
margin: 10px 0;
padding: 8px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.result-area {
width: 100%;
min-height: 100px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f8f9fa;
}
</style>
</head>
<body>
<div class="container">
<h3>代码编辑区</h3>
<textarea class="code-area" id="codeInput" placeholder="请输入要运行的JavaScript代码"></textarea>
<button class="run-btn" id="runBtn">运行代码</button>
<h3>运行结果</h3>
<div class="result-area" id="resultOutput"></div>
</div>
<script src="script.js"></script>
</body>
</html>
JavaScript核心逻辑实现
核心逻辑需要处理按钮点击事件，获取编辑区的代码内容，然后安全地执行代码并将结果输出到结果区域。为了避免直接执行代码带来的安全风险，这里采用new Function的方式封装代码，同时捕获执行过程中的错误。
// 获取页面元素
const codeInput = document.getElementById('codeInput');
const runBtn = document.getElementById('runBtn');
const resultOutput = document.getElementById('resultOutput');
// 存储原始console.log方法
const originalLog = console.log;
// 自定义log方法收集输出内容
let logCache = [];
console.log = function(...args) {
logCache.push(args.join(' '));
originalLog.apply(console, args);
};
// 运行按钮点击事件处理
runBtn.addEventListener('click', () => {
// 清空之前的缓存和结果
logCache = [];
resultOutput.innerHTML = '';
const code = codeInput.value.trim();
if (!code) {
resultOutput.innerHTML = '<span style="color:red">请输入代码内容</span>';
return;
}
try {
// 使用new Function执行代码，避免直接eval的上下文问题
const runCode = new Function(code);
runCode();
// 展示收集到的log输出
if (logCache.length > 0) {
resultOutput.innerHTML = logCache.join('<br>');
} else {
resultOutput.innerHTML = '代码执行完成，无输出内容';
}
} catch (error) {
// 捕获执行错误并展示
resultOutput.innerHTML = `<span style="color:red">执行错误：${error.message}</span>`;
} finally {
// 恢复原始console.log方法
console.log = originalLog;
}
});
功能优化与扩展
代码高亮支持
基础的textarea没有代码高亮功能，可以替换为可编辑的pre配合code标签，结合高亮库实现语法高亮，提升编辑体验。需要注意的是动态修改高亮内容时要同步更新编辑区域的原始代码值。
多语言支持扩展
如果需要支持HTML、CSS等多类型代码运行，可以添加语言选择下拉框，针对不同语言采用不同的执行逻辑。比如HTML代码可以直接插入到结果区域的iframe中运行，CSS代码可以动态创建style标签注入到页面中。
安全限制
如果是在公开环境中使用，需要对输入的代码做过滤处理，禁止执行危险操作比如操作本地存储、发起跨域请求等，避免恶意代码造成安全问题。可以在执行前对代码内容做关键词检测，拦截危险代码片段。
注意事项
- 不要在生产环境直接使用该方法执行用户提交的未知代码，存在XSS攻击风险
- 如果代码包含DOM操作，结果区域需要允许动态内容渲染，避免内容被转义
- 执行异步代码时，需要在异步操作完成后再收集输出结果，避免结果遗漏
HTMLJavaScript代码编辑器代码运行修改时间：2026-06-17 23:33:44