JavaScript : replaceメソッドを使ったHTMLの置換

〽️　色んなことができそうだ。


こんにちは。「ふ」です。今回はJavaScriptのreplaceメソッドを使ってみます。
以下のようなHTML▼▼▼

html

りんご　
みかん　
ぶどう　

ブラウザ

３行目の"ぶどう"を"ばなな"にかえてみましょう。

JavaScript

#-script-# var str = document.getElementById("sample").innerHTML; str = str.replace("ぶどう","ばなな"); document.getElementById("sample").innerHTML = str; #-/script-#

結果（ブラウザ）

文字列を置き換えるreplaceメソッド

JavaScriptをつかって文字列の内容を置き換えるには、replaceメソッドを使います。

 replaceメソッド 

（ 文字列 ）.replace （

  "文字列の一部" , "置換後の文字列"

 ）

試してみましょう。
文字列「夏みかん」を「冬みかん」にreplace。

JavaScript

このように文字列の一部を書き換える、「置換」を行うことができます。

HTMLの内容を書き換えてみよう。

はじめにあったコードに戻りましょう。

html

りんご　
みかん　
ぶどう　

replace関数を使ってHTMLをの内容を書き換える。その流れをみていきましょう。

getElementById( ).innerHTMLを使ってdivで囲まれた中身を文字列として取り出しています。

JavaScript

var str = documents.getElementById("sample").innerHTML;

格納先の変数名は文字列( string )をもじって"str"としました。
文字列 を もじる・・・
文字列　を　もじる・・
文字　もじる・・・・・

気になるフレーズだ。

いちおー出力してみましょう。

console.log(str); 「「１▼

りんご　
みかん　
ぶどう　

」」 「「３//値の型も確認。」」 console.log(typeof(str)); 「「１▼ string」」

( typeof( str ) )を出力すると、ちゃんと文字列( string )が取得されているのが確認できます。

str = str.replace("ぶどう","ばなな");

strの内容をreplaceメソッドで書き換えて、再びstrに格納しています。

ここ重要。replaceさせた内容をもいちどstrに代入してあげないと、strの値は変更されません。少し脱線しますが例をあげてみましょう。

JavaScript

var greeting = "おはよう"; 「「３//replaceさせただけの場合」」 greeting.replace("おはよう","こんにちは"); console.log(greeting); 「「１▶︎ おはよう」」 「「３//greetingの値が変更されていない!」」 「「３//replaceしたものを変数に格納し直す」」 greeting = greeting.replace("おはよう","こんばんは"); console.log(greeting); 「「１▶︎ こんばんは」」  「「３//変更された。」」

これご注意を。
扨（さて）、もとのinnerHTMLを呼び出して、加工したstrに書き換えます。

document.getElementById("sample").innerHTML = str;

結果（ブラウザ）

変更内容をブラウザに反映させることができました。

CSSも仕込めるぞ！

replaceメソッドを使ってHTMLの内容を書き換える流れをまとめると、以下のようになります。

Javascript

「「１①
内のコードを文字列として取得する」」 var str = document.getElementById("class").innerHTML; 「「１②その文字列をreplaceして変数strに格納し直す（複数の条件を記述することもできます）」」 str = str.replace("なんちゃら","なんちゃら"); str = str.replace("かんちゃら","かんちゃら"); 「「１③再び
）内の文字列を呼び出し、replaceさせた変数を格納することで家内容を書き換える」」 document.getElementById("class").innerHTML = str;

②の部分にreplace条件を追加してみましょう。今度は文字列の綴りを変えるのではなく、CSSタグを追加してみます。

ブラウザに誤読されないように、シングルクオテーションとダブルクオテーションを使い分けましょう。
プレビューしてみます。

"color:red"が適用されました。

じゃあ色々できるやん！

今回紹介したreplaceメソッド、それ単体では「文字列を置き換える」だけのものです。しかしgetElementByIdメソッドと組み合わせて使うことで、HTMLの内容を操作することができる。

〜色んなことができそうな予感 ♪





関連記事




「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。

🐧 twitter 🐧