Question

我正在寻找一个native / jQuery方法来返回一个元素开始标记，其中包含所有属性及其值作为字符串。

看起来应该是这样的。

HTML：

<body id="mybody" class="someclass">

</body>

不存在的jQuery函数：

$("body").tagAsString(); //returns <body id="mybody" class="someclass">

或不存在的原生函数：

document.getElementsByTagName("body")[0].tagToString();

我可以使用它们的值获取元素的所有属性，但我需要确切的字符串，因为它只是在HTML中。寻找整个开头标签的长度。

Answer 1

问题在于，一旦解析了HTML，浏览器就不再关心它了。浏览器解释的DOM结构非常重要。 HTML已经消失了。过时了。成品。忽略。

How the browser thinks of the HTML after parsing it.

浏览器不以任何方式保留“原始HTML”。实际上，浏览器并不真正喜欢HTML。这不是它的想法，将事物转换为HTML可能有点棘手。

您可以获得的是表示浏览器当前如何拥有该元素。这可能与HTML不同。例如，DOM中已更改的任何属性将与原始HTML显示不同。

该过程可能如下所示：

var html = $(document.body)
    .clone() // get a copy of the element to work on
    .empty() // empty it
    .appendTo('<div/>').parent().html(); // equivalent to outerHTML

这给出了如下结果：

'<body class="question-page"></body>'

然后，您可以删除最终<中的所有内容：

html = html.substr(0,html.lastIndexOf('<'));

给出了：

'<body class="question-page">'

Answer 2

鉴于评论中提供的信息描述了您尝试解决的实际问题，您根本不需要检索body标记的属性，也不应该使用字符串搜索。只是做：

var $newContent = $('<div>' + data + '</div>').children();
$(document.body).empty().append($newContent);

即。解析整个数据 - $(data) - 然后获取所有子节点，并将它们放在现有的document.body中。

<div> + data + </div>是必需的，因为$(html)需要单个元素（和子元素），并且不接受<!DOCTYPE ...><html>...</html>的标准HTML样板。它似乎也会删除<head>和<body>标记，只留下他们的孩子。在我刚刚做的测试中，给出了

var data = '<!doctype html><html><head></head><body><span>Test</span>' +
           '<span>Test 2</span></body></html>'

然后

$('<div>' + data + '</div>').children()

只提供两个<span>元素，即数据<body>标记的所需内容。

编辑确定 - 由于<head>和<body>代码被剥离，似乎完全无法正常工作保留<head>的原始内容。

试试这个，相反 - 它是你原创技术和这一个的结合：

var $newContent = $(data.substring(data.indexOf('<body')));
$(document.body).empty().append($newContent);

Answer 3

<body id="mybody" class="someclass">
    blah blah...
</body>

要获得你想要的东西，请使用：

正如@lonesomeday所提到的，并非所有浏览器都支持outerHTML，因此您必须使用自己的实现：

jQuery.fn.outerHTML = function() {
    return $("<p>").append(this.eq(0).clone()).html();
};

然后用它来接收你想要的东西：

var html = $(document.body).outerHTML(),
    html = html.substr(0, html.indexOf('>')+1);

所以html变量包含<body id="mybody" class="someclass">

Answer 4

最好避免自己解析。你可能想看看 https://unifiedjs.com/ - 很多插件来做解析相关的工作。

如何在Javascript / jQuery中将元素和所有属性作为字符串获取

4 个答案: