1

以前、文字列内のHTMLの内容を操作する必要がある場合は、次のようにします。

$('<div>').html(someHtmlString).find('#name').text("George").end().html()

これはhtmlフラグメントには最適ですが、この特定のケースでは、iframeのコンテンツを文字列として取得しています。つまり、同じ方法で操作する必要がある完全なhtmlドキュメントを表す文字列です。このトリック、または文字列をjQueryでラップするだけでも機能しなくなりました。

これが問題を示すjsbinです

html = """
<html>
<head>
  <style>* { box-sizing: border-box; }</style
</head>
<body style="max-height: 750px">
  <style> body { background-color: 'lavender'; }</style>
  <div>
    <p>Hi</p>
    <p id="name">Your Name</p>
  </div>
</body>
</html>
"""

$html = $(html)
$html.find('#name').text("George")

console.log $html.html()

完全なHTMLドキュメントを解析および操作するにはどうすればよいですか？

頭にはスタイル要素が含まれている可能性があり、本体には失いたくない属性が含まれている可能性があることに注意してください。ドキュメントにsvgが含まれていると、奇妙なシリアル化も見られます。

ここに持ち込むのがより理にかなっている別のライブラリがあれば、私はjQueryに夢中ではありません

4

1 に答える 1

2

最も正しいアプローチは、文字列を使用してドキュメントを作成し（JavaScriptを使用してドキュメントオブジェクトを作成する方法を参照）、それを操作して（jQueryが操作できるかどうかはわかりませんが、そう思います）、取得することです。あなたがそれから必要とするどんな内容でも。htmlが適切であるか、少なくとも（可能な限り同一の）DOMツリーに解析されると想定する必要があります。あなたの例では、headタグに無効なendタグが付いたスタイルタグがあることに気付きました。そのため、検討中のすべてのブラウザでそれがどのように機能するかわかりません。

（申し訳ありませんが、まだ実用的な例はありません。今朝はちょっと忙しいですが、その考えをそこに伝えたかっただけです）。

于 2013-01-24T15:48:05.333 に答える