嘿，我完全懂你的需求——你想要拿到元素起始标签的完整字符串（就像<div id="div1" align="center" style="border:1px solid red">这样，不带内部内容和闭合标签），对吧？

首先得明确：原生DOM里并没有专门的属性（类似innerHTML/outerHTML）直接提供这个值。不过你提到的结合outerHTML和正则的思路确实是个简洁的方案，另外还有更稳妥的手动构建方式，我都给你列出来：

方案1：使用outerHTML + 正则表达式 #

这是最快速的实现方式，利用outerHTML拿到元素的完整HTML，再通过正则提取开头的起始标签部分：

function getOpeningTag(element) {
  const fullHtml = element.outerHTML;
  // 匹配从<开头到第一个>结束的片段，对应起始标签
  const matchResult = fullHtml.match(/^<[^>]+>/);
  return matchResult ? matchResult[0] : '';
}

// 调用示例
const targetDiv = document.getElementById('div1');
console.log(getOpeningTag(targetDiv));
// 输出: <div id="div1" align="center" style="border:1px solid red">

⚠️ 注意：如果元素的属性值里意外包含了>（虽然这不符合HTML规范，但极端情况可能出现），正则会提前截断，导致结果不准确。

方案2：手动构建起始标签（更可靠） #

如果你需要处理所有边缘情况，遍历元素的属性手动拼接标签会更稳妥：

function buildOpeningTag(element) {
  // 先拼接标签名（转为小写保持一致性）
  let tagStr = `<${element.tagName.toLowerCase()}`;
  
  // 遍历元素的所有属性，包括自定义属性
  for (const attr of element.attributes) {
    tagStr += ` ${attr.name}="${attr.value}"`;
  }
  
  // 闭合起始标签
  tagStr += '>';
  return tagStr;
}

// 调用示例
const targetDiv = document.getElementById('div1');
console.log(buildOpeningTag(targetDiv));
// 输出和需求完全一致的起始标签字符串

这个方法能准确获取元素的所有属性，不管属性值里有什么特殊字符（只要符合HTML属性规范），都不会出错。

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