JavaScript检测字符串中是否含有html标签实现方法

实现 JavaScript 检测字符串中是否含有 HTML 标签，可以利用正则表达式进行匹配，并返回匹配结果。

以下是实现方法：

使用正则表达式

function hasHTMLTag(str) {
  var pattern = /<(.*)>.*<\/\1>|<(.*) \/>/;
  return pattern.test(str);
}

// 示例字符串
var str1 = "<p>这是一段带有标签的文本。</p>";
var str2 = "这段文本中没有标签。";

console.log(hasHTMLTag(str1)); // true
console.log(hasHTMLTag(str2)); // false

解释：

/ <(.*)>.*<\/\1>|<(.*) \/> / 正则表达式中：

• <(.*)>.*<\/\1> 匹配含有开始标签和结束标签的 HTML 元素
• <(.*) \/> 匹配自闭合标签的 HTML 元素

<(.*) \/> 在正则表达式中的位置在前，是因为如果在后面情况下面 HTML 代码：

<div class="total">
  <span class="big-text"></span>
  /div> <!-- 代码失误 -->
</div>

正则表达式会匹配 <span class="big-text"></span> 和 <div class="total">，判断结果是带有标签。

去除标签后比较字符串

另外一种方法是先去除字符串中的所有标签，然后比较原字符串与去除标签后的字符串是否相等。

function hasHTMLTag(str) {
  var reg = /<\/?.+?\/?>/g;
  var noTagStr = str.replace(reg, '');
  return str !== noTagStr;
}

// 示例字符串
var str1 = "<p>这是一段带有标签的文本。</p>";
var str2 = "这段文本中没有标签。";

console.log(hasHTMLTag(str1)); // true
console.log(hasHTMLTag(str2)); // false

解释：

<\/?.+?\/?>/g 正则表达式中：

• \/? 表示匹配 / 可有可无
• .+? 表示匹配任意字符（非贪婪模式）
• < > 表示匹配标签的开始和结尾

以上两种方法可以判断字符串中是否包含 HTML 标签。其中，正则表达式的处理方式更为直观明了。