如何判断存储用户HTML输入的变量是否包含img标签

这里提供两种实用的实现思路，适配不同场景：

方案一：正则匹配img标签（轻量快速） #

直接检查HTML字符串里是否存在img标签，考虑到用户可能的不规范写法（比如标签前后加空格、大小写混用），用正则做兼容：

txtOrImg: function () {
  // 匹配任意格式的img标签，忽略大小写和空格
  const imgPattern = /<\s*img[^>]+>/i;
  return imgPattern.test(this.userEntries) ? '图片' : '纯文本';
}

这个正则能覆盖<img src="a.png">、< img src="b.jpg" >这类常见的不规范写法，适合简单场景。

方案二：DOM解析（严谨可靠） #

如果用户的HTML结构比较复杂（比如img嵌套在多层标签里），正则可能漏判，用DOM解析更稳妥：

txtOrImg: function () {
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = this.userEntries;
  // 查找是否存在img元素
  const hasImage = tempContainer.querySelector('img') !== null;
  return hasImage ? '图片' : '纯文本';
}

这种方法会真实解析HTML结构，能准确识别所有存在的img元素，适合复杂HTML输入的场景。

补充说明 #

• 如果需要区分「纯图片（无任何文本内容）」和「图文混合」，可以在判断完img后，再检查解析后的DOM中文本内容是否为空：

  // 扩展：判断是否为纯图片
  const hasText = tempContainer.textContent.trim() !== '';
  return hasImage ? (hasText ? '图文混合' : '纯图片') : '纯文本';
  

• 要是在Node.js环境下使用，需要引入jsdom库来模拟DOM环境。

内容的提问来源于stack exchange，提问作者chaf ch r