🧪 纯文本节点测试
测试 BlurText 自动处理纯文本节点的能力
✨ 新功能:现在 BlurText 可以自动处理纯文本节点!
当你点击纯文本时,扩展会自动将其包裹在 <span> 中,然后模糊。
测试 1:纯文本节点(自动处理)智能
💡 测试方法:
- 点击"李四" → 应该自动识别并只模糊"李四"
- 点击"28" → 应该只模糊数字
- 点击"上海" → 应该只模糊城市名
- 点击"姓名:"标签 → 模糊标签
测试 2:混合文本(智能分割)智能
手机号:138-8888-9999
邮箱:user@example.com
API Key: sk-1234567890abcdefghijk
💡 测试方法:
- 点击"138-8888-9999" → 自动识别手机号并单独模糊
- 点击"user@example.com" → 自动识别邮箱并模糊
- 点击"sk-1234..." → 自动识别密钥并模糊
- 点击"手机号:"文字 → 模糊整行
测试 3:复杂场景
用户 张三 的手机号是 186-0000-1234,邮箱是 zhangsan@company.com
💡 测试方法:
- 点击"张三" → 只模糊名字
- 点击"186-0000-1234" → 只模糊手机号
- 点击"zhangsan@company.com" → 只模糊邮箱
- 点击"用户"或"的手机号是" → 模糊整行
测试 4:列表中的纯文本
- 订单号 ORD-20250101-001
- 金额 ¥1,288.00
- 地址 北京市朝阳区某某街道123号
💡 测试方法:
- 点击订单号 → 自动识别并模糊
- 点击金额 → 模糊数字
- 点击地址 → 模糊地址
🔍 工作原理:
1. 检测文本节点
当你点击纯文本时,使用 document.caretRangeFromPoint() 检测是否点在文本节点上
2. 智能识别模式
扫描文本内容,识别常见的敏感信息模式:
• 手机号:/\d{3,}[-\d]*/
• 邮箱:/[\w\.-]+@[\w\.-]+\.\w+/
• Token/密钥:/[a-zA-Z0-9_-]{10,}/
3. 自动包裹
如果识别到敏感信息,自动创建 <span> 包裹该部分
如果没识别到特定模式,包裹整个文本节点
4. 应用模糊
对新创建的 <span> 应用模糊效果
✅ 预期效果:
• 点击敏感信息(手机号、邮箱等)→ 只模糊该信息
• 点击普通文字 → 模糊整个文本节点或整行
• 支持在同一行中选择性模糊不同部分
• 不破坏原始 HTML 结构(只在需要时添加 span)
💡 Console 日志:
按 F12 打开控制台,点击文字时会看到:
• [BlurText] Detected text node: ...
• [BlurText] Found sensitive value: ...
• [BlurText] Wrapped text node in span