Vue中如何检测用户发送消息时标签内是否存在空白内容

需求说明 #

检测用户发送消息中的自定义标签是否符合规则，若存在不合规标签则弹出警告。核心规则：

• 普通标签（如<b>）必须包含非空白内容且有闭合标签<>
• 链接标签<a>必须同时包含非空白的链接地址和非空白的文本内容

规则示例 #

• <b></> => 不合规（内容为空）
• <b>hello</> => 合规（内容非空）
• <a >link</> => 不合规（链接地址为空）
• <a https://www.google.com></> => 不合规（文本内容为空）
• <a https://www.google.com>link</> => 合规（地址和文本均非空）

基于给定正则的实现代码 #

在Vue组件中添加以下检测方法：

// 验证标签合规性的核心方法
validateTags(message) {
  const rules = [
    [/<right>([^<]*)(</>)?/g],
    [/<center>([^<]*)(</>)?/g],
    [/<left>([^<]*)(</>)?/g],
    [/<a ([^>]*)>([^<]*)</>?/g],
    [/<([^>]*)>([^<]*)</>/g],
  ];

  for (const [regex] of rules) {
    let match;
    // 全局匹配所有符合规则的标签
    while ((match = regex.exec(message)) !== null) {
      // 针对不同标签类型做验证
      if (regex.source.includes('<a')) {
        // 链接标签：地址和文本都不能全空白
        const url = match[1]?.trim();
        const text = match[2]?.trim();
        if (!url || !text) return false;
      } else if (/<(right|center|left)>/.test(regex.source)) {
        // 对齐标签：必须有闭合标签且内容非空白
        const content = match[1]?.trim();
        const hasClosing = match[2];
        if (!hasClosing || !content) return false;
      } else {
        // 普通标签：内容不能全空白
        const content = match[2]?.trim();
        if (!content) return false;
      }
    }
  }
  return true;
}

调用方式 #

在用户发送消息时调用检测方法，不合规则弹出警告：

sendMessage() {
  const userInput = this.messageContent;
  if (!this.validateTags(userInput)) {
    alert('标签格式错误，请检查输入的标签内容！');
    return;
  }
  // 执行消息发送逻辑
  // ...
}

说明 #

• 该方法会遍历所有给定正则，全局匹配消息中的所有标签
• 每个标签都会根据类型验证必填内容是否为非空白值
• 只要发现一个不合规标签，立即返回false终止检测

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