如何在不使用outerHTML的情况下在javascript中将标签作为文本？ [复制]

Posted 2023-05-07

【中文标题】如何在不使用outerHTML的情况下在javascript中将标签作为文本？ [复制]

【英文标题】：How do I get tag as text in javascript, without using outerHTML? [duplicate]

【发布时间】：2020-07-21 21:58:42

【问题描述】：

我想要的是没有innerhtml的outerHTML。

我不想计算innerHTML的字符串，因为它可能很昂贵而且我必须经常做这个操作，有没有简单的方法来获得它？

【问题讨论】：

您要达到的目标的示例？

你不能只使用 DOM 吗？一切都可用，假设您使用 document.getElementById，然后验证返回是一个对象，然后取消引用返回的节点以获取 .parentNode。

【参考方案1】：

您可以使用元素的内部结构并自己构建字符串：

function getTagHTML(el) 
  if (!el instanceof HTMLElement) return null;
  let result = `<$el.tagName.toLowerCase()`;
  for (const attribute in el.attributes) 
    if (el.attributes[attribute].nodeValue) 
      result += ` $el.attributes[attribute].name="$el.attributes[attribute].nodeValue.replace(/"/g, "&quot;")"`
  
  result += `></$el.tagName.toLowerCase()>`;
  return result;


console.log(getTagHTML(document.getElementById('outer')));

<div id="outer" class='i-want-"this"'>
  <span>I do not want this</span>
</div>

如果开始标签足够了，那很容易：

const tag = `$outer.outerHTML.split('>')[0]>`;

console.log(tag);

<div id="outer" class="i-want-this">
  <span>I do not want this</span>
</div>

请注意，正如 Quentin 所指出的，> 不能用来标记开始标签的结尾，因为它很可能出现在任何属性的值中。

【讨论】：

这不可靠。您不能将第一个 > 字符作为开始标记的结尾。例如：jsbin.com/liqarigiju/1/edit?html,js,console

这似乎没有正确编码。不是必须是3 > 2吗？

没有。 > 字符在属性值内没有特殊含义（至少在被引用的情况下）并且不需要表示为实体。如果 HTML 是使用实体编写的，那么您会得到相同的结果，因为浏览器会在通过 outerHTML 将 DOM 转换回 HTML 时对其进行规范化。 jsbin.com/tatuhutixa/1/edit?html,js,console

@Quentin Thx 指出，将相应地编辑到我的帖子中。添加了一种不依赖字符串解析的更强大的方法。

重新编辑：el.attributes[attribute].nodeValue 需要转义。它可能包含" 个字符。

【参考方案2】：

据我所知，没有 javascript “本机”方式来获取没有其内容的 HTML 标记。如何使用 jQuery 和

let oElement = $("#myElementsID");

或

let oElement = $(".myElementsClass");

这不会给你 HTML 标记，而是你可以在一个整洁的对象中要求的所有信息。