使用JS将带有HTML标记的字符串拆分成单独的对象

function splitHTMLString(htmlString) {
  // 使用正则表达式提取HTML标记
  var regex = /<[^>]+>/g;
  var htmlTags = htmlString.match(regex);

  var result = [];
  if (htmlTags) {
    // 遍历HTML标记数组
    htmlTags.forEach(function(tag) {
      // 创建一个对象来存储标记的相关信息
      var obj = {};

      // 提取标签名
      var tagName = tag.match(/<\/?(\w+)/);
      obj.tagName = tagName ? tagName[1] : '';

      // 提取属性
      var attributes = tag.match(/\w+="[^"]+"/g);
      if (attributes) {
        attributes.forEach(function(attr) {
          var attrArr = attr.split('=');
          var attrName = attrArr[0];
          var attrValue = attrArr[1].replace(/"/g, '');
          obj[attrName] = attrValue;
        });
      }

      // 提取内容
      var content = tag.match(/>([^<]*)</);
      obj.content = content ? content[1] : '';

      // 将对象添加到结果数组中
      result.push(obj);
    });
  }

  return result;
}

// 示例用法
var htmlString = '<div class="container">Hello, <span style="color: blue;">World!</span></div>';
var objects = splitHTMLString(htmlString);
console.log(objects);

[
  {
    tagName: 'div',
    class: 'container',
    content: 'Hello, '
  },
  {
    tagName: 'span',
    style: 'color: blue;',
    content: 'World!'
  }
]