🧪 纯文本节点测试

测试 BlurText 自动处理纯文本节点的能力

✨ 新功能:现在 BlurText 可以自动处理纯文本节点!
当你点击纯文本时,扩展会自动将其包裹在 <span> 中,然后模糊。

测试 1:纯文本节点(自动处理)智能

姓名:李四

年龄:28

城市:上海

💡 测试方法:

测试 2:混合文本(智能分割)智能

手机号:138-8888-9999

邮箱:user@example.com

API Key: sk-1234567890abcdefghijk

💡 测试方法:

测试 3:复杂场景

用户 张三 的手机号是 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