html-content-processor
Version:
A professional library for processing, cleaning, filtering, and converting HTML content to Markdown. Features advanced customization options, presets, plugin support, fluent API, and TypeScript integration for reliable content extraction.
181 lines (166 loc) • 7.92 kB
HTML
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>HTML过滤器和Markdown转换测试</title><style>body {
font-family: Arial, sans-serif;
margin: 2rem;
line-height: 1.6;
}
#input, #output, #markdown-output {
width: 100%;
height: 300px;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 1rem;
font-family: monospace;
white-space: pre-wrap;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
.results {
margin-top: 2rem;
}
.result-item {
border: 1px dashed #ccc;
padding: 10px;
margin-bottom: 10px;
background-color: #f9f9f9;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
margin-bottom: 10px;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
color: black;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #4CAF50;
color: white;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.visible {
display: block;
}</style><script defer="defer" src="bundle.js"></script></head><body><h1>HTML过滤器和Markdown转换测试</h1><p>将HTML代码粘贴到输入框中，然后点击按钮进行过滤或转换</p><textarea id="input" placeholder="在此粘贴HTML代码..."></textarea><div class="tab"><button class="tablinks active" onclick="openTab(event, 'html-filter')">HTML过滤器</button> <button class="tablinks" onclick="openTab(event, 'markdown-converter')">Markdown转换</button></div><div id="html-filter" class="tabcontent visible"><div><button id="filterToString">过滤并输出字符串</button> <button id="filterToArray">过滤并输出数组</button></div><div class="results"><h2>过滤结果：</h2><div id="output"></div><h2>过滤片段（数组形式）：</h2><div id="array-output"></div></div></div><div id="markdown-converter" class="tabcontent"><div><button id="toMarkdown">普通Markdown</button> <button id="toMarkdownWithRefs">带引用Markdown</button> <button id="toPlainMarkdown">纯文本Markdown</button> <button id="toFitMarkdown">精简Markdown</button></div><div class="results"><h2>Markdown结果：</h2><textarea id="markdown-output" readonly="readonly"></textarea></div></div><div><button id="clearAll">清空</button> <button id="loadExample">加载示例HTML</button></div><script>document.addEventListener('DOMContentLoaded', function() {
// 确保htmlFilter已经可用
if (typeof window.htmlFilter === 'undefined') {
console.error('HTML过滤器未正确加载，请检查bundle.js是否已加载');
return;
}
// HTML过滤功能
document.getElementById('filterToString').addEventListener('click', () => {
const input = document.getElementById('input').value;
const output = window.htmlFilter.toString(input);
document.getElementById('output').innerHTML = output;
document.getElementById('array-output').innerHTML = '';
});
document.getElementById('filterToArray').addEventListener('click', () => {
const input = document.getElementById('input').value;
const fragments = window.htmlFilter.toArray(input);
// 显示字符串输出
document.getElementById('output').innerHTML = fragments.join('');
// 显示数组形式输出
const arrayOutput = document.getElementById('array-output');
arrayOutput.innerHTML = '';
fragments.forEach((fragment, index) => {
const item = document.createElement('div');
item.className = 'result-item';
item.innerHTML = `
<strong>片段 #${index + 1}:</strong>
<pre>${escapeHtml(fragment)}</pre>
`;
arrayOutput.appendChild(item);
});
});
// Markdown转换功能
document.getElementById('toMarkdown').addEventListener('click', () => {
const input = document.getElementById('input').value;
const result = window.htmlFilter.toMarkdown(input);
document.getElementById('markdown-output').value = result.rawMarkdown;
});
document.getElementById('toMarkdownWithRefs').addEventListener('click', () => {
const input = document.getElementById('input').value;
const markdownText = window.htmlFilter.toMarkdownWithRefs(input);
document.getElementById('markdown-output').value = markdownText;
});
document.getElementById('toPlainMarkdown').addEventListener('click', () => {
const input = document.getElementById('input').value;
const markdownText = window.htmlFilter.toPlainMarkdown(input);
document.getElementById('markdown-output').value = markdownText;
});
document.getElementById('toFitMarkdown').addEventListener('click', () => {
const input = document.getElementById('input').value;
const markdownText = window.htmlFilter.toFitMarkdown(input);
document.getElementById('markdown-output').value = markdownText;
});
// 通用功能
document.getElementById('clearAll').addEventListener('click', () => {
document.getElementById('input').value = '';
document.getElementById('output').innerHTML = '';
document.getElementById('array-output').innerHTML = '';
document.getElementById('markdown-output').value = '';
});
document.getElementById('loadExample').addEventListener('click', () => {
// 通过AJAX加载示例HTML
fetch('./test-example.html')
.then(response => response.text())
.then(html => {
document.getElementById('input').value = html;
})
.catch(error => {
console.error('加载示例失败:', error);
// 备用示例（简单版）
const fallbackExample = '<html><head><title>示例页面</title></head><body><h1>主标题</h1><p>这是正文内容</p><footer>页脚</footer></body></html>';
document.getElementById('input').value = fallbackExample;
});
});
// 辅助函数：转义HTML以在<pre>中安全显示
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
});
// 标签页切换功能
function openTab(evt, tabName) {
// 隐藏所有标签内容
const tabcontent = document.getElementsByClassName("tabcontent");
for (let i = 0; i < tabcontent.length; i++) {
tabcontent[i].classList.remove("visible");
}
// 移除所有标签按钮的active类
const tablinks = document.getElementsByClassName("tablinks");
for (let i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
// 显示当前标签内容并添加active类到当前按钮
document.getElementById(tabName).classList.add("visible");
evt.currentTarget.classList.add("active");
}</script></body></html>