206 lines
6.1 KiB
HTML
206 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>纯文本节点测试</title>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
max-width: 800px;
|
||
margin: 40px auto;
|
||
padding: 20px;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.container {
|
||
background: white;
|
||
padding: 30px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
h1 {
|
||
color: #667eea;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.subtitle {
|
||
color: #888;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.test-box {
|
||
background: #f8f9fa;
|
||
padding: 20px;
|
||
margin: 20px 0;
|
||
border-left: 4px solid #667eea;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.test-box h3 {
|
||
margin-top: 0;
|
||
color: #764ba2;
|
||
}
|
||
|
||
.example {
|
||
background: white;
|
||
padding: 15px;
|
||
margin: 10px 0;
|
||
border: 2px solid #ddd;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.badge {
|
||
display: inline-block;
|
||
padding: 4px 10px;
|
||
border-radius: 12px;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.badge-auto {
|
||
background: #4caf50;
|
||
color: white;
|
||
}
|
||
|
||
code {
|
||
background: #f5f5f5;
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
color: #e91e63;
|
||
}
|
||
|
||
.info {
|
||
background: #e3f2fd;
|
||
border-left: 4px solid #2196f3;
|
||
padding: 15px;
|
||
margin: 20px 0;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.success {
|
||
background: #e8f5e9;
|
||
border-left: 4px solid #4caf50;
|
||
padding: 15px;
|
||
margin: 20px 0;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
strong {
|
||
color: #333;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🧪 纯文本节点测试</h1>
|
||
<p class="subtitle">测试 BlurText 自动处理纯文本节点的能力</p>
|
||
|
||
<div class="success">
|
||
<strong>✨ 新功能：</strong>现在 BlurText 可以自动处理纯文本节点！<br>
|
||
当你点击纯文本时，扩展会自动将其包裹在 <code><span></code> 中，然后模糊。
|
||
</div>
|
||
|
||
<div class="test-box">
|
||
<h3>测试 1：纯文本节点（自动处理）<span class="badge badge-auto">智能</span></h3>
|
||
<div class="example">
|
||
<p><strong>姓名：</strong>李四</p>
|
||
<p><strong>年龄：</strong>28</p>
|
||
<p><strong>城市：</strong>上海</p>
|
||
</div>
|
||
<p>💡 <strong>测试方法：</strong></p>
|
||
<ul>
|
||
<li>点击"李四" → 应该<strong>自动识别并只模糊"李四"</strong></li>
|
||
<li>点击"28" → 应该只模糊数字</li>
|
||
<li>点击"上海" → 应该只模糊城市名</li>
|
||
<li>点击"姓名："标签 → 模糊标签</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="test-box">
|
||
<h3>测试 2：混合文本（智能分割）<span class="badge badge-auto">智能</span></h3>
|
||
<div class="example">
|
||
<p>手机号：138-8888-9999</p>
|
||
<p>邮箱：user@example.com</p>
|
||
<p>API Key: sk-1234567890abcdefghijk</p>
|
||
</div>
|
||
<p>💡 <strong>测试方法：</strong></p>
|
||
<ul>
|
||
<li>点击"138-8888-9999" → <strong>自动识别手机号并单独模糊</strong></li>
|
||
<li>点击"user@example.com" → 自动识别邮箱并模糊</li>
|
||
<li>点击"sk-1234..." → 自动识别密钥并模糊</li>
|
||
<li>点击"手机号："文字 → 模糊整行</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="test-box">
|
||
<h3>测试 3：复杂场景</h3>
|
||
<div class="example">
|
||
<p>用户 张三 的手机号是 186-0000-1234，邮箱是 zhangsan@company.com</p>
|
||
</div>
|
||
<p>💡 <strong>测试方法：</strong></p>
|
||
<ul>
|
||
<li>点击"张三" → 只模糊名字</li>
|
||
<li>点击"186-0000-1234" → 只模糊手机号</li>
|
||
<li>点击"zhangsan@company.com" → 只模糊邮箱</li>
|
||
<li>点击"用户"或"的手机号是" → 模糊整行</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="test-box">
|
||
<h3>测试 4：列表中的纯文本</h3>
|
||
<div class="example">
|
||
<ul>
|
||
<li>订单号 ORD-20250101-001</li>
|
||
<li>金额 ¥1,288.00</li>
|
||
<li>地址 北京市朝阳区某某街道123号</li>
|
||
</ul>
|
||
</div>
|
||
<p>💡 <strong>测试方法：</strong></p>
|
||
<ul>
|
||
<li>点击订单号 → 自动识别并模糊</li>
|
||
<li>点击金额 → 模糊数字</li>
|
||
<li>点击地址 → 模糊地址</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="info">
|
||
<strong>🔍 工作原理：</strong><br><br>
|
||
<strong>1. 检测文本节点</strong><br>
|
||
当你点击纯文本时，使用 <code>document.caretRangeFromPoint()</code> 检测是否点在文本节点上<br><br>
|
||
|
||
<strong>2. 智能识别模式</strong><br>
|
||
扫描文本内容，识别常见的敏感信息模式：<br>
|
||
• 手机号：<code>/\d{3,}[-\d]*/</code><br>
|
||
• 邮箱：<code>/[\w\.-]+@[\w\.-]+\.\w+/</code><br>
|
||
• Token/密钥：<code>/[a-zA-Z0-9_-]{10,}/</code><br><br>
|
||
|
||
<strong>3. 自动包裹</strong><br>
|
||
如果识别到敏感信息，自动创建 <code><span></code> 包裹该部分<br>
|
||
如果没识别到特定模式，包裹整个文本节点<br><br>
|
||
|
||
<strong>4. 应用模糊</strong><br>
|
||
对新创建的 <code><span></code> 应用模糊效果
|
||
</div>
|
||
|
||
<div class="success">
|
||
<strong>✅ 预期效果：</strong><br>
|
||
• 点击敏感信息（手机号、邮箱等）→ 只模糊该信息<br>
|
||
• 点击普通文字 → 模糊整个文本节点或整行<br>
|
||
• 支持在同一行中选择性模糊不同部分<br>
|
||
• 不破坏原始 HTML 结构（只在需要时添加 span）
|
||
</div>
|
||
|
||
<div class="info">
|
||
<strong>💡 Console 日志：</strong><br>
|
||
按 F12 打开控制台，点击文字时会看到：<br>
|
||
• <code>[BlurText] Detected text node: ...</code><br>
|
||
• <code>[BlurText] Found sensitive value: ...</code><br>
|
||
• <code>[BlurText] Wrapped text node in span</code>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|