HTML注释提取器 - 提取页面隐藏注释

`; // 初始化：加载示例到textarea function loadSample() { $htmlInput.val(sampleHtml); // 切换到粘贴标签 $('#paste-tab').tab('show'); // 自动提取 extractComments(); } // 提取注释的核心函数 function extractComments() { const html = $htmlInput.val().trim(); currentSourceHtml = html; if (!html) { showEmptyState(); return; } // 正则匹配HTML注释（包括条件注释） const commentRegex = //g; const comments = []; let match; while ((match = commentRegex.exec(html)) !== null) { const fullMatch = match[0]; const content = match[1]; const startIndex = match.index; const endIndex = startIndex + fullMatch.length; // 计算行号 const beforeText = html.substring(0, startIndex); const lineNumber = (beforeText.match(/\n/g) || []).length + 1; const afterText = html.substring(0, endIndex); const endLineNumber = (afterText.match(/\n/g) || []).length + 1; // 检测是否为条件注释 const isConditional = /^\s*\[if\s+/i.test(content); comments.push({ fullMatch: fullMatch, content: content, startIndex: startIndex, endIndex: endIndex, lineNumber: lineNumber, endLineNumber: endLineNumber, length: content.length, isConditional: isConditional, preview: content.replace(/\s+/g, ' ').trim().substring(0, 120) }); } currentComments = comments; renderResults(comments); } // 渲染结果 function renderResults(comments) { if (comments.length === 0) { // 有HTML但没有注释 if (currentSourceHtml.trim()) { $commentsList.html(` `); $commentCount.text('0 条注释').show(); $statsRow.hide(); $searchFilter.hide(); $resultActions.hide(); } else { showEmptyState(); } return; } // 更新计数 $commentCount.text(`${comments.length} 条注释`).show(); $resultActions.show(); $searchFilter.show(); // 统计信息 const totalChars = comments.reduce((sum, c) => sum + c.length, 0); const avgLength = Math.round(totalChars / comments.length); const maxComment = comments.reduce((max, c) => c.length > max.length ? c : max, comments[0]); const minComment = comments.reduce((min, c) => c.length < min.length ? c : min, comments[0]); const conditionalCount = comments.filter(c => c.isConditional).length; let statsHtml = ` 总字符数 ${totalChars.toLocaleString()} 平均长度 ${avgLength.toLocaleString()} 字符 最长 ${maxComment.length.toLocaleString()} 字符 最短 ${minComment.length.toLocaleString()} 字符 `; if (conditionalCount > 0) { statsHtml += `条件注释 ${conditionalCount} 条`; } $statsRow.html(statsHtml).show(); // 渲染列表 renderCommentList(comments); // 应用当前筛选 const filterText = $filterInput.val().trim(); if (filterText) { applyFilter(filterText); } } // 渲染注释列表 function renderCommentList(comments) { if (comments.length === 0) { $commentsList.html(` `); return; } let html = ''; comments.forEach((c, i) => { const escapedContent = escapeHtml(c.content); const escapedPreview = escapeHtml(c.preview || c.content.replace(/\s+/g, ' ').trim().substring(0, 120)); const displayIndex = i + 1; const lineInfo = c.lineNumber === c.endLineNumber ? `第 ${c.lineNumber} 行` : `第 ${c.lineNumber}-${c.endLineNumber} 行`; html += ` `; }); $commentsList.html(html); // 点击展开/收起 $commentsList.find('.comment-item').on('click', function(e) { if ($(e.target).closest('.btn-copy-single').length) return; $(this).toggleClass('expanded'); }); // 单条复制 $commentsList.find('.btn-copy-single').on('click', function(e) { e.stopPropagation(); const idx = $(this).data('copy-index'); if (currentComments[idx]) { copyToClipboard(currentComments[idx].content, '已复制该条注释'); } }); } // 筛选过滤 function applyFilter(filterText) { const lowerFilter = filterText.toLowerCase(); let filtered; if (lowerFilter) { filtered = currentComments.filter(c => c.content.toLowerCase().includes(lowerFilter) ); } else { filtered = currentComments; } renderCommentList(filtered); // 高亮匹配文本 if (lowerFilter && filtered.length > 0) { $commentsList.find('.comment-preview').each(function() { const $this = $(this); const text = $this.text(); const regex = new RegExp(`(${escapeRegex(lowerFilter)})`, 'gi'); $this.html(escapeHtml(text).replace(regex, '$1')); }); } } // 显示空状态 function showEmptyState() { $commentsList.html(` `); $commentCount.hide(); $statsRow.hide(); $searchFilter.hide(); $resultActions.hide(); currentComments = []; } // 复制到剪贴板 function copyToClipboard(text, message) { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(() => showToast(message || '已复制到剪贴板')); } else { // Fallback const textarea = document.createElement('textarea'); textarea.value = text; textarea.style.position = 'fixed'; textarea.style.opacity = '0'; document.body.appendChild(textarea); textarea.select(); try { document.execCommand('copy'); showToast(message || '已复制到剪贴板'); } catch (e) { showToast('复制失败，请手动选择复制'); } document.body.removeChild(textarea); } } // Toast提示 function showToast(message) { $toastCopy.text(message).addClass('show'); clearTimeout($toastCopy.data('timeout')); $toastCopy.data('timeout', setTimeout(() => { $toastCopy.removeClass('show'); }, 1800)); } // HTML转义 function escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } // 属性转义（用于data属性） function escapeAttr(text) { return text.replace(/&/g, '&').replace(/"/g, '"').replace(//g, '>'); } // 正则转义 function escapeRegex(str) { return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); } // 下载文件 function downloadFile(content, filename, mimeType) { const blob = new Blob([content], { type: mimeType }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } // 生成TXT内容 function generateTxtContent(comments) { let txt = ''; comments.forEach((c, i) => { txt += `========================================\n`; txt += `注释 #${i + 1} | 行号: ${c.lineNumber} | 长度: ${c.length} 字符`; if (c.isConditional) txt += ` | [条件注释]`; txt += `\n========================================\n`; txt += c.content + '\n\n'; }); txt += `\n总计: ${comments.length} 条注释\n`; txt += `导出时间: ${new Date().toLocaleString()}\n`; return txt; } // 生成JSON内容 function generateJsonContent(comments) { const data = comments.map((c, i) => ({ index: i + 1, content: c.content, lineNumber: c.lineNumber, endLineNumber: c.endLineNumber, length: c.length, isConditional: c.isConditional, startIndex: c.startIndex, endIndex: c.endIndex })); return JSON.stringify({ totalComments: comments.length, exportTime: new Date().toISOString(), comments: data }, null, 2); } // 从URL获取HTML function fetchFromUrl(url) { $fetchStatus.show().html(` `); $btnFetchUrl.prop('disabled', true); const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 20000); fetch(url, { signal: controller.signal, headers: { 'Accept': 'text/html' } }) .then(response => { clearTimeout(timeoutId); if (!response.ok) { throw new Error(`HTTP ${response.status}: ${response.statusText}`); } return response.text(); }) .then(html => { $fetchStatus.html(` 获取成功！已自动填充并提取注释 `); $htmlInput.val(html); $('#paste-tab').tab('show'); extractComments(); }) .catch(error => { clearTimeout(timeoutId); let errorMsg = ''; if (error.name === 'AbortError') { errorMsg = '请求超时（超过20秒），请检查URL或使用粘贴方式'; } else if (error.message.includes('Failed to fetch') || error.message.includes('NetworkError')) { errorMsg = '网络请求失败，可能是跨域(CORS)限制。建议在浏览器中打开该页面，右键「查看页面源代码」，复制后粘贴到工具中'; } else { errorMsg = `获取失败：${error.message}`; } $fetchStatus.html(` ${errorMsg} `); }) .finally(() => { $btnFetchUrl.prop('disabled', false); }); } // 事件绑定 $btnExtract.on('click', extractComments); $btnLoadSample.on('click', loadSample); $btnClear.on('click', function() { $htmlInput.val(''); $urlInput.val(''); $filterInput.val(''); $fetchStatus.hide(); showEmptyState(); }); $btnFetchUrl.on('click', function() { const url = $urlInput.val().trim(); if (!url) { $fetchStatus.show().html(` 请输入有效的URL地址 `); return; } // 简单URL验证 try { new URL(url); } catch (e) { $fetchStatus.show().html(` URL格式不正确，请输入完整地址（包含 https://） `); return; } fetchFromUrl(url); }); // 筛选输入实时过滤 let filterDebounce; $filterInput.on('input', function() { clearTimeout(filterDebounce); const filterText = $(this).val().trim(); filterDebounce = setTimeout(() => { applyFilter(filterText); }, 250); }); // 复制全部 $btnCopyAll.on('click', function() { if (currentComments.length === 0) return; const allContent = currentComments.map((c, i) => `[注释 ${i + 1}]\n${c.content}`).join('\n\n---\n\n'); copyToClipboard(allContent, `已复制 ${currentComments.length} 条注释`); }); // 下载TXT $btnDownloadTxt.on('click', function() { if (currentComments.length === 0) return; const txt = generateTxtContent(currentComments); downloadFile(txt, 'html-comments.txt', 'text/plain;charset=utf-8'); showToast('TXT 文件下载中...'); }); // 下载JSON $btnDownloadJson.on('click', function() { if (currentComments.length === 0) return; const json = generateJsonContent(currentComments); downloadFile(json, 'html-comments.json', 'application/json;charset=utf-8'); showToast('JSON 文件下载中...'); }); // 键盘快捷键 Ctrl+Enter 提取注释 $htmlInput.on('keydown', function(e) { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); extractComments(); } }); // URL输入框回车触发获取 $urlInput.on('keydown', function(e) { if (e.key === 'Enter') { e.preventDefault(); $btnFetchUrl.trigger('click'); } }); // Tab切换时隐藏URL获取状态 $('#paste-tab').on('shown.bs.tab', function() { $fetchStatus.hide(); }); // 初始化：预加载示例（让用户看到效果） setTimeout(() => { if (!$htmlInput.val().trim()) { loadSample(); } }, 300); });