勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryにて$.parseHTML()を用いてHTML文字列をDOMノードに変換する方法

  jQuery JavaScript

あるサイトのソースコードを拝見しているとjQueryで$.parseHTML()という見慣れない記述があった。内容的にはajaxで他ページのHTMLを取得して扱いやすい形に変換する際に$.parseHTML()を使っているように見受けられた。以下に具体的な利用方法をメモ。

 

利用方法

ソースコード

$(function(){
    const html = `
        <div class="parent">
            parent
            <div class="child">
                child
            </div>
        </div>
    `;
    const parse_array = $.parseHTML(html);
    const parse_obj = $($.parseHTML(html));
    console.log(parse_array);
    console.log(parse_obj);
});

出力例

上記ソースコードを実行した際、コンソールログには以下のような内容が出力される。

Array(3) [ #text, div.parent, #text ]
​0: #text "\n\t\t\t"
1: <div class="parent">
2: #text "\n\t\t"
length: 3
​
Object { 0: #text, 1: div.parent, 2: #text, length: 3 }
0: #text "\n\t\t\t"
1: <div class="parent">
2: #text "\n\t\t"
length: 3

指定した要素を抽出したい場合

console.log(parse_obj.find(`.child`).text()); //child

 

リファレンス

jQuery.parseHTML()

https://api.jquery.com/jQuery.parseHTML/

 - jQuery JavaScript

  関連記事

PHPとSQLiteでi-mobileのデータをグラフ化する方法

i-mobileでクリック保証のアフィリエイトだけど数値が並んでいるだけでグラフ ...

YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法

以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...

jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...

jQueryでjsonデータを処理(parseJSON)

他社が作成したシステムのちょっと改修案件があった。設置したもののどうも動かないと ...

tableのフィルター機能

jQueryのプラグインで簡単にフィルター機能が つけられたのでメモ。 ■必要な ...