1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

「数億規模スタートアップのCTO講師」と「エンジニアキャリア専門のポテパン」が贈る、実践型Rubyスクール。

【jQuery入門】replaceを使って文字を置換、削除する方法

Pocket

JavaScriptのreplace関数を、以下のような方法で使う場合があると思います。

* replace()を使って文字列を置換する
* replace()を使って文字列を削除する

今回はjQueryでの使って行う方法を下記のHTMLを使って紹介したいと思います。

1.replace()を使って文字列を置換する

下記のHTMLのサンプルを使って説明をします。

上記のプログラムは、h1タグの「jQuery Replace」という文字列を、「replace」という文字列に置換するコードです。
ここで重量なことはreplace関数は文字列に対して行うため、JavaScriptやjQueryで取得するHTMLの要素オブジェクトではなく、要素内の文字列を取得してなければならないと言う点です。

またreplace関数を実行するだけだと、プログラム内の文字列は変化しますが、画面上には表示されません。
画面で表示する場合は、下記のように文字列が元々あったHTMLの要素オブジェクトへの値の設定も忘れずに行うようにしましょう。

2.replace()を使って文字列を削除する

先ほどは文字列を置換しましたが、今度は特定の文字を削除する方法です。

`

上記のプログラムは、divタグの「サンプル」という文字列を削除するコードです。
先ほどの違いは以下の点です。

* replace関数の第2引数に空文字「””」を設定し、文字を削除している
* divタグの要素から文字列を取得/設定する方法が、text関数ではなく、html関数である

最初の提示したサンプルのように取得した文字列にHTMLのタグが含まれる場合は、text関数で取得していしまうと、文字列のみでタグが削除されてしまいます。
文字列にHTMLのタグが含まれる場合は、html関数で取得することで、タグが削除されずにHTML形式の文字列を維持したまま取得可能です。

【おすすめ記事】

短期集中!jQueryを教われるスクール10選
jQueryの本・参考書の評判
【無料】jQueryが身につく学習サイト5つまとめ

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ
ページ上部へ戻る