HTML输入框怎么用正则表达式校验敏感词汇-html教程-PHP中文网

html pattern属性无法用于敏感词过滤，因其仅支持全字符串精确匹配（自动锚定^$），不支持“包含某词”逻辑；敏感词需用javascript监听input事件，结合includes()或regexp动态检测并调用setcustomvalidity()控制校验状态。

html输入框怎么用正则表达式校验敏感词汇

HTML pattern 属性完全不能用于敏感词过滤——它只做全字符串匹配，且不支持“包含某词”这类逻辑。

为什么 `pattern` 对敏感词无效

浏览器对 pattern 的处理是自动加 ^ 和 $ 做**全字符串精确匹配**。你写 pattern="黑客"，实际等价于 ^黑客$，意思是“整个输入必须**刚好等于**‘黑客’两个字”，而不是“只要包含‘黑客’就报错”。这和敏感词拦截的目标完全相反。

常见误用现象：

用户输“我讨厌黑客攻击”，pattern 依然通过（因为不等于“黑客”）
写了 pattern=".*黑客.*"，但 .* 开头结尾在 pattern 中被浏览器静默忽略或降权，规则失效
想用 pattern 拦截多个词（如“黑客|病毒|木马”），浏览器不支持 | 分支语法，直接当字面字符串匹配

必须用 JavaScript 实现的三个关键点

敏感词校验本质是“检测子串是否存在”，只能靠 JS 的 test() 或 includes() 动态判断。以下是最小可行方案：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

监听 input 或 blur 事件，而非依赖表单提交
用 RegExp 构造带 g 标志的正则（如 /黑客|病毒|木马/gi），或更稳妥地用 Array.some(word => value.includes(word))
调用 setCustomValidity() 主动设置错误状态，否则 checkValidity() 始终返回 true

示例代码：

const input = document.querySelector('input[name="content"]');
const bannedWords = ['黑客', '病毒', '木马', '非法'];
input.addEventListener('input', () => {
  const value = input.value;
  const hasBanned = bannedWords.some(word => value.includes(word));
  input.setCustomValidity(hasBanned ? '包含禁止词汇，请修改' : '');
});

移动端和 Safari 的兼容性陷阱

iOS Safari 对中文 Unicode 范围（如 [u4e00-u9fa5]）支持极差，但敏感词过滤本身不依赖 Unicode 范围——直接用字符串 includes() 最稳。需注意：

不要试图用 pattern + 中文正则兜底，它在 Safari 下大概率静默失效
如果词库很大（上百个词），includes() 循环性能尚可；若达千级，建议预编译为单个 RegExp，但注意 new RegExp(words.join('|'), 'gi') 中特殊字符要先 escape
inputmode="text" 必须显式设置，避免 iOS 键盘强制切换为数字/URL 模式，导致用户无法输入中文词