1

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

它应该看起来像这样。

HTML：

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

</body>

不存在的 jQuery 函数：

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

或不存在的本机功能：

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

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

4

4 回答 4

4

问题是，一旦 HTML 被解析，浏览器就不再关心它了。浏览器解释的 DOM 结构才是最重要的。HTML 消失了。卡普特。完成的。忽略。

浏览器在解析 HTML 后如何看待它。

浏览器不会以任何方式保留“原始 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>'

然后，您可以从 final 中删除所有内容<：

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

这使：

'<body class="question-page">'
于 2013-10-31T20:46:38.790 回答
2

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

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

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

这<div> + data + </div>是必要的，因为$(html)需要单个元素（和子元素）并且不接受<!DOCTYPE ...><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>标签的所需内容。

编辑好的 -由于剥离了and标记，这似乎并没有达到预期的效果，而保留了原始内容。<head><body><head>

试试这个，而不是 - 它是您原始技术和这个的组合：

var $newContent = $(data.substring(data.indexOf('<body')));
$(document.body).empty().append($newContent);
于 2013-10-31T20:50:21.107 回答
1 
<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">

于 2013-10-31T20:46:31.793 回答
0

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

于 2021-01-19T11:12:35.050 回答