从没有内部文本内容的元素中获取 html 标记

Posted 2023-05-07

【中文标题】从没有内部文本内容的元素中获取 html 标记

【英文标题】：Get the html tag from an element without the inner text content

【发布时间】：2017-02-07 19:42:59

【问题描述】：

使用 Javascript 我希望获取一个 DOM 元素并仅获取它的 tag、class、id > 等（括号中的内容），但忽略其中的实际 文本内容。有点像innerhtml/textContent 的反义词。

所以我希望得到这样的 div：

<p id="foo">Ipsum Lorem</p>

变成一个字符串：

<p id="foo"> </p>

【问题讨论】：

取节点名并将属性连接为字符串

“拿走”它们是什么意思？你真的需要 HTML 标签格式的结果吗？

我的意思是在括号内获取 html 字符串

如果您只需要括号内的内容，那么它并不是真正的标签。使用丹尼尔的答案，您可以单独获取属性键和值。所以最好的解决方案取决于你最终要对数据做什么。你知道，你永远不会得到原始的 HTML。它需要从 DOM 节点重新创建，因此可能不完全相同。

【参考方案1】：

使用.cloneNode 或者如果您不想使用它：

获取节点名并将元素属性缩减为字符串。

'use strict';

const elem = document.getElementById('foobar');
const nodeName = elem.nodeName.toLowerCase();
const attrs = [...el.attributes].map((a) => 
  if (a.value === '')
    return a.name;
  else if (a.value.indexOf('"') > -1)
    return `$a.name='$a.value'`;
  else
    return `$a.name="$a.value"`;
).join(' ');
const str = `<$nodeName $attrs></$nodeName>`;

https://jsfiddle.net/k22tyqbr/3/

【讨论】：

你刚刚重新实现了elem.cloneNode().outerHTML。注意包含双引号字符的属性值。

不知道.cloneNode...但是属性可以包含双引号？从来不知道。

是的，如果它使用单引号作为值分隔符<div data-say='bob says "hello"'></div> 你的代码仍然可以工作，但结果中的属性值会格式错误。

这比仅仅使用 cloneNode() 更好吗？

@JonSG 可能没有，不知道那个方法

【参考方案2】：

将outerHTML 中的innerHTML 替换为任何内容，或者像我在这里所做的那样，用省略号“...”：

var txt = elem.outerHTML.replace(elem.innerHTML, '...');

选择元素后（getElementById("foo")），

<p id="foo">Ipsum Lorem</p>

这会将string 返回到var txt

<p id="foo">...</p>

【讨论】：

@Jamesonthedog：这没有什么问题，但作为一般解决方案的答案是痛苦的。

过多不必要的 DOM 元素序列化是不必要的搜索。当然，那里只有两个节点，但在一般情况下，这将是相当大的矫枉过正。您可以通过执行elem.cloneNode() 来克隆没有内容的节点。那么您只需要.outerHTML。我不知道你是否真的想要新内容。

...另外，我很确定这在某些情况下会产生意想不到的结果。