text()とhtml()で取得・置き換え・追加!タブも改行も!【jQuery】

jquery JavaScript

こんにちは、なっちる先生(@nacchi_jagariko)です。

現在、フリーランスエンジニアとして働いています。

今回は、jQueryでのhtml()・text()の操作方法についてにまとめて行きます!

タブや改行をつける方法も簡単に紹介します〜。

この記事は以下のような人向けです。

html()・text()の操作方法をまとめたい!!!

それでは参りましょう〜。

スポンサーリンク

 html()とtext()の違い

まず、html()とtext()の違いについて話します。

元となるHTMLは以下として、説明していきます。

text()

text()は指定した要素の「テキスト」を取得するコードになります。

例えば、

で取得できるものは、

になります。

また、text()のかっこ内の引数は「文字列」として指定した要素に置き換えられることになります。

html()

html()は指定した要素の「HTML」を取得するコードになります。

例えば、

で取得できるものは、

になります。

また、html()のかっこ内の引数は、HTML文として指定した要素に置き換えられることになります。

文字はtext()、コードはhtml()、簡単だね!!

 取得・置き換え・追加

html()もtext()も、使い方は同じなので「追加・取得・書き換え」の方法をまとめて紹介していきます〜。

なお、元となるHTMLは上と同じく、以下のコードとして話を進めていきます。

取得

取得方法

取得する方法は、()だけで完了します。

これが基礎になるよ〜

取得結果

取得結果は以下になります。

(以下参考)

See the Pen mggEmp by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

console.log()とよく使えるね

書き換え

置き換え方法

置き換える方法は、各々()内に引数として書き換えたい文字列またはHTML文を入れればOKです。

置き換え結果

置き換え結果は以下になります。

container_textのpタグはなくなった結果になります。

(以下参考)

See the Pen zXXqrm by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

追加

追加方法

ただ、引数を入れるだけでは、置き換わってしまいます。

なので、追加したい場合には、引数に「取得したもの」と「追加するもの」を入れて対処します。

追加結果

追加した結果は以下になります。

text()で取得したものは文字列になるので、pタグはなくなります。

(以下参考)

See the Pen ROOaja by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

おまけ:タブや改行もつけたい!

html()内で綺麗なコードを挿入するために、改行やタブも含めたhtmlを入れたい場合もあると思います。

そんなときには、正規表現を使いましょう。

改行コード

改行は正規表現を使って、以下のように表します。

タブコード

タブは正規表現を使って、以下のように表します。

使用例

これで追加した場合も、きれいなコードが保てます🎵

 まとめ

以上、text()とhtml()の操作手法の総復習でした〜。

これさえ押さえておけばtext()とhtml()はバッチリです!

その他いろいろなコードを組み合わせて、素敵なシステムを作ってください〜。

以上で、なっちる先生の授業を終わります。

ステキなプログラミングライフを!

参考

コーディングの規則ちゃんと守れてる?【プログラミング初心者向け】
こんにちは、なっちる先生(@nacchi_jagariko)です。 大学中退後、完全未経験でエンジニアに就職し、現在フリーランスとして働いています。 プログラミングをはじめたて方、コーディングの仕方習ったことありますか? ...
特殊文字とは?よく使う特殊文字をまとめてみたよ!【プログラミング】
こんにちは、なっちる先生(@nacchi_jagariko)です。 特殊文字覚えてません、現役フリーランスエンジニアです。 今回は、html内で使う特殊文字とは何か、よく使う特殊文字は何か話していきます。 この記事は、以下...
なっちる先生のLINE始めました!【エンジニア就職の無料相談承ります】

エンジニア就活頑張っている方を少しでもサポートできればと思い、LINEでエンジニア就職の無料相談始めました

スポンサーリンク
JavaScript
スポンサーリンク
なっちる先生をフォローする
なっちる先生
タイトルとURLをコピーしました