javascript - jQuery html() 不适用于字符串

Question

$("<html><head></head><body>Hello</body></html>").html()

退货undefined。当然，我的情况比这复杂一点，但这行代码说明了问题。我怎样才能解决这个问题？

这让我知道我正在尝试做什么：

var $theSite = $(myHTMLString);//myHTMLString is an external web site (string)
$theSite.filter('input').remove();
alert($myHTMLString.html());

score 7 · Accepted Answer

那是因为没有可渲染的HTML

注意.text()返回一个值

$("<html><head></head><body>Hello</body></html>").text();

如果我们在 body 标签中添加一些 HTML，我们也会得到一个结果！

$("<html><head></head><body><h1>Hello</h1></body></html>").html();

根据 OP 评论更新

无需使用 JQuery 来解决您的问题。将 HTML 视为字符串，然后使用正则表达式删除输入标签：

var x = '<html><head></head><body><input type="text" />Hello<input type="button" /><p>p</p></body></html>';

alert(x);

var regX = /(<input([^>]+)>)/ig;

alert(x.replace(regX, ""));

score 3 · Accepted Answer

您可以使用 DOMParser - 像这样：

var pageStr = "<html><head></head><body><h1>Hello</h1><span>YO</span></body></html>";
var dp = new DOMParser();
var doc = dp.parseFromString(pageStr,'text/html');
alert(doc.documentElement.outerHTML);//"<html><head></head><body><h1>Hello</h1><span>YO</span></body></html>"
$(doc).find("span").remove();
alert($(doc).get(0).documentElement.outerHTML);//"<html><head></head><body><h1>Hello</h1></body></html>"

JSFiddle

更新：答案现在实现了 DOMParser polyfill

/*
 * DOMParser HTML extension
 * 2012-09-04
 * 
 * By Eli Grey, http://eligrey.com
 * Public domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */

/*! @source https://gist.github.com/1129031 */
/*global document, DOMParser*/

(function(DOMParser) {
    "use strict";

    var
      DOMParser_proto = DOMParser.prototype
    , real_parseFromString = DOMParser_proto.parseFromString
    ;

    // Firefox/Opera/IE throw errors on unsupported types
    try {
        // WebKit returns null on unsupported types
        if ((new DOMParser).parseFromString("", "text/html")) {
            // text/html parsing is natively supported
            return;
        }
    } catch (ex) {}

    DOMParser_proto.parseFromString = function(markup, type) {
        if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
            var
              doc = document.implementation.createHTMLDocument("")
            ;
                if (markup.toLowerCase().indexOf('<!doctype') > -1) {
                    doc.documentElement.innerHTML = markup;
                }
                else {
                    doc.body.innerHTML = markup;
                }
            return doc;
        } else {
            return real_parseFromString.apply(this, arguments);
        }
    };
}(DOMParser));

score 3 · Accepted Answer

您可以使用jQuery(htmlString). 如文档中所述：

如果 HTML 比没有属性的单个标记更复杂，如上例所示，则元素的实际创建由浏览器的 innerHTML 机制处理。在大多数情况下，jQuery 会创建一个新<div>元素并将该元素的 innerHTML 属性设置为传入的 HTML 片段。

在传递复杂的 HTML 时，某些浏览器可能无法生成完全复制所提供的 HTML 源的 DOM。如前所述，jQuery 使用浏览器的 .innerHTML 属性来解析传递的 HTML 并将其插入到当前文档中。在此过程中，一些浏览器会过滤掉某些元素，例如<html>、 <title>或 <head>元素。因此，插入的元素可能不能代表传递的原始字符串。

这就是你的情况。你不能用它jQuery(htmlString)来解析一个完整的网页，因为它必须是可以放在DIV. 您应该改用DOMParserAPI。

score 0 · Accepted Answer

var $html=$("<html><head></head><body>
             <input type='text' value='hello'><p>hi</p></body></html>");
$("div").html($html.filter('*:not("input")'));

http://jsfiddle.net/tSUFc/1/

score -3 · Accepted Answer

你用错了。第一部分是一个选择器，你可以用它选择一个或多个元素，如下所示：

$('html,body') // selects both html and body
$('body div') // selects all 'divs' in 'body' (just like css)

.html()作品是这样的：

// a setter
$('#someElement').html('<strong>This is the new html in #someElement</strong');
// or, as getter:
console.log( $('#someElement').html() ); // returns " '<strong>This is the new html in #someElement</strong' "

javascript - jQuery html() 不适用于字符串

5 回答 5

根据 OP 评论更新

Related

Reference