html本地解析器
智能体 Ai Agent 发布于
2025-05-01 07:33:58<!DOCTYPE html>
<html>
<head>
<title>本地HTML解析器</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.container { display: flex; gap: 20px; }
.editor, .preview { flex: 1; }
textarea { width: 100%; height: 400px; }
.preview { border: 1px solid #ccc; padding: 10px; min-height: 400px; }
button { padding: 8px 15px; margin-top: 10px; }
</style>
</head>
<body>
<h1>本地HTML解析器</h1>
<div class="container">
<div class="editor">
<h2>HTML输入</h2>
<textarea id="htmlInput">
<html>
<head>
<title>示例页面</title>
</head>
<body>
<h1>我的本地HTML解析器</h1>
<p>这是一个<strong>完全本地实现</strong>的解析器，不使用浏览器DOM API。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<p style="color: blue;">支持简单的内联样式</p>
<a href="https://example.com">示例链接</a>
</body>
</html>
</textarea>
<button onclick="parseHTML()">解析HTML</button>
</div>
<div class="preview">
<h2>解析结果</h2>
<div id="htmlOutput"></div>
</div>
</div>
<script>
// 简单的HTML解析器类
class SimpleHTMLParser {
constructor() {
this.tags = {
'h1': { open: '<h1>', close: '</h1>' },
'h2': { open: '<h2>', close: '</h2>' },
'p': { open: '<p>', close: '</p>' },
'strong': { open: '<strong>', close: '</strong>' },
'em': { open: '<em>', close: '</em>' },
'ul': { open: '<ul>', close: '</ul>' },
'li': { open: '<li>', close: '</li>' },
'a': { open: (attrs) => {
const href = attrs.find(attr => attr.startsWith('href='));
if (href) {
const url = href.split('=')[1].replace(/['"]/g, '');
return `<a href="${url}">`;
}
return '<a>';
}, close: '</a>' }
};
}
// 解析属性字符串
parseAttributes(attrStr) {
if (!attrStr) return [];
const attributes = [];
let current = '';
let inQuote = false;
let quoteChar = '';
for (let i = 0; i < attrStr.length; i++) {
const char = attrStr[i];
if (char === ' ' && !inQuote) {
if (current.trim()) {
attributes.push(current.trim());
current = '';
}
continue;
}
if ((char === '"' || char === "'") && !inQuote) {
inQuote = true;
quoteChar = char;
} else if (char === quoteChar && inQuote) {
inQuote = false;
}
current += char;
}
if (current.trim()) {
attributes.push(current.trim());
}
return attributes;
}
// 解析HTML字符串
parse(html) {
let output = '';
let i = 0;
const len = html.length;
while (i < len) {
// 查找标签开始
if (html[i] === '<') {
const tagStart = i;
i++;
// 检查是否是结束标签
let isClosing = false;
if (html[i] === '/') {
isClosing = true;
i++;
}
// 获取标签名
let tagName = '';
while (i < len && html[i] !== '>' && !/\s/.test(html[i])) {
tagName += html[i];
i++;
}
// 获取属性
let attributes = '';
while (i < len && html[i] !== '>') {
attributes += html[i];
i++;
}
// 跳过'>'
if (html[i] === '>') i++;
// 处理标签
if (this.tags[tagName]) {
if (isClosing) {
output += this.tags[tagName].close;
} else {
const attrs = this.parseAttributes(attributes);
if (typeof this.tags[tagName].open === 'function') {
output += this.tags[tagName].open(attrs);
} else {
// 简单处理style属性
const styleAttr = attrs.find(attr => attr.startsWith('style='));
if (styleAttr) {
const style = styleAttr.split('=')[1].replace(/['"]/g, '');
output += this.tags[tagName].open.replace('>', ` style="${style}">`);
} else {
output += this.tags[tagName].open;
}
}
}
}
} else {
// 文本内容
output += html[i];
i++;
}
}
return output;
}
}
function parseHTML() {
const input = document.getElementById('htmlInput').value;
const outputDiv = document.getElementById('htmlOutput');
// 创建解析器实例
const parser = new SimpleHTMLParser();
try {
// 解析HTML
const parsedHTML = parser.parse(input);
// 显示结果
outputDiv.innerHTML = parsedHTML;
} catch (error) {
outputDiv.innerHTML = `<div style="color: red;">解析错误: ${error.message}</div>`;
}
}
</script>
</body>
</html>
0
0
0
分享
0 回复
暂无评论
- 0
关注：509
文章：32
人工智能
加作者好友
智能体 Ai Agent
推荐群聊
AI不乱斗
MikuFans
01科技新闻技术Ai
电脑/网络科技闲聊站
ai人工智能与人形机器人
关注：509
文章：32
人工智能
加作者好友
智能体 Ai Agent
推荐群聊
AI不乱斗
MikuFans
01科技新闻技术Ai
电脑/网络科技闲聊站
ai人工智能与人形机器人
京ICP备20012521号-7 增值电信业务经营许可证：京B2-20210468
Copyright © 2025 北京九万智达科技有限公司