表单textarea纯文本校验：如何识别转义后的HTML标签？

方法一：扩展正则同时匹配未转义/转义标签 #

直接修改正则，让它同时覆盖原生HTML标签和转义后的实体标签：

const htmlDetectPattern = /(<[^>]+>)|(&lt;[^&gt;]+&gt;)/gi;

• 规则说明：
  • (<[^>]+>)：匹配未转义的原生标签（比如<a href="#">test</a>）
  • (<[^>]+>)：匹配转义后的标签（比如<a href="#">link</a>）
  • gi修饰符：全局匹配+忽略大小写，确保所有场景都能覆盖

使用示例：

const input = document.querySelector('textarea').value;
if (htmlDetectPattern.test(input)) {
  alert('禁止输入HTML标签（包括转义后的格式）');
  // 这里可以添加阻止提交/清除内容的逻辑
}

方法二：先解码转义实体，再用原正则校验 #

这种方法更稳妥，先把转义的实体还原成原生标签，再用你原来的正则检测：

// 解码HTML实体的工具函数
function decodeEntities(text) {
  const tempTextarea = document.createElement('textarea');
  tempTextarea.innerHTML = text;
  return tempTextarea.value;
}

// 校验逻辑
const inputText = document.querySelector('textarea').value;
const decodedText = decodeEntities(inputText);
// 用你原来的正则检测解码后的内容
const originalPattern = /<[^>]+>/gi;
if (originalPattern.test(decodedText)) {
  alert('输入包含HTML内容，请仅输入纯文本');
}

• 原理：利用textarea的innerHTML属性自动解码实体，把<转成<、>转成>，之后就能用原有正则识别所有HTML标签。

方法三：直接过滤/校验纯文本（最彻底） #

如果核心需求是只允许纯文本，可直接对比“清理后内容”和原输入：

function sanitizeToPlainText(text) {
  // 先解码实体，再移除所有HTML标签
  const decoded = decodeEntities(text);
  return decoded.replace(/<[^>]+>/g, '').trim();
}

// 校验逻辑
const inputText = document.querySelector('textarea').value;
const cleanedText = sanitizeToPlainText(inputText);
if (cleanedText !== inputText.trim()) {
  alert('输入存在违规HTML内容，请修改后提交');
}

注意：正则校验HTML并非绝对完美（比如极端嵌套、异常格式的标签可能漏检），如果对安全性要求极高，可结合DOM解析做二次校验。

内容的提问来源于stack exchange，提问作者timholz