質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

3393閲覧

jQueryでbodyタグを生成した場合にfindが機能しない

hojo

総合スコア195

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

1クリップ

投稿2016/11/25 08:27

編集2016/11/25 08:43

HTMLの文字列から指定の要素をセレクトして抜き出したいです。

以下のコードでは期待した動作をしました。

JavaScript

1 var html = "<div><h1><p><i>ok</i></p></h1></div>"; 2 $(html).find('h1').html(); 3// "<p><i>ok</i></p>"

しかし以下のようにhtmlに<body>タグが含まれていた場合には期待どおりに動作しません。

JavaScript

1 var html = "<body><h1><p><i>ok</i></p></h1></body>"; 2 $(html).find('h1').html(); 3// undefined

jQueryでは<body>タグを含むHTMLの操作ができないのでしょうか?もしできない場合、html文字列から指定の要素をセレクトして抜き出したい場合はどうすればよいでしょうか?

maisumakun👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

解決済みですが、追加情報です。

$(文字列)に与えるテキストに<body>などが含まれていると、.find()でうまく動作しない場合があるようです (参考: Stackoverflowのとある質問と回答)。

jQueryのドキュメントの jQuery( html [, ownerDocument] ) の説明で、

When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided. As mentioned, jQuery uses the browser's .innerHTML property to parse the passed HTML and insert it into the current document. During this process, some browsers filter out certain elements such as <html>, <title>, or <head> elements. As a result, the elements inserted may not be representative of the original string passed.

との説明があります。ブラウザ毎のinnerHTMLの仕様の違いにより、いくつかのタグとそれに含まれるテキストは削除されることがあるということで、<body>もこれにあたる場合があるのだと考えられます。

対策としては、$(...)に与えるテキストから<body>などを削除することが考えられます。たとえば、

javascript

1html = html.replace(/^.*?<body.*?>(.*?)<\/body>.*$/, "$1"); 2$(html).find('h1').html();

投稿2016/11/25 09:46

ikedas

総合スコア4229

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hojo

2016/11/30 14:08

追加情報ありがとうございました!
guest

0

ベストアンサー

ドキュメントにパースすればできます。

JavaScript

1var doc = new DOMParser().parseFromString("<body><h1><p><i>ok</i></p></h1></body>", "text/html"); 2console.log($(doc).find('h1').html()); // <p><i>ok</i></p>

投稿2016/11/25 09:25

guest1213

総合スコア306

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

仕様上同じHTML内に body要素を2つ置く事ができないため、jQuery でなくても出来ないと思います。
例に出されているような取得については下記のようにすれば取得出来ます。

JavaScript

1var html = "<body><h1><p><i>ok</i></p></h1></body>"; 2// $(html).find('h1').html(); 3// ↓ 4 $(html).html(); // $(html)には<h1><p><i>ok</i></p></h1>が入っています。 5// "<p><i>ok</i></p>"

【body 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/body

<body> 要素は文書中に一つだけ配置できます。

投稿2016/11/25 08:50

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hojo

2016/11/25 09:04 編集

ご回答ありがとうございます。 なるほど、やはりそういうことなのですね。 ということは、h1ではなくpをセレクトしたい場合には無理ということですよね。 appendを利用しない限りでは、bodyタグが含まれていたとしても画面には描画されていないので xmlを操るように裏側で自由にjQueryのメソッドが使えると思っていました。 domとして画面に描画されていない<body>などのタグを含むhtml文字列から 指定の要素をセレクトして抜き出したい場合はどうすればよいかわかりますか? アドバイスいただけると助かります。
kei344

2016/11/25 10:13

DOMParserを忘れていました、すいません。 > いうことは、h1ではなくpをセレクトしたい場合には無理ということですよね。 var html = "<body><h1><p><i>ok</i></p></h1></body>"; $(html).find('p').html(); で取得出来ますよ。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問