JavaScript:class要素のHTMLをreplace。

〽️これが実用的なreplace。




replaceしたい「div」は１箇所とは限らない！

こんにちは。「ふ」です。

前回まではreplaceしたい範囲を<div>　〜　</div>で囲みid名を指定。それに対してJavaScriptを仕込んできました。

HTML・JavaScript

「「１成形したい範囲を
〜
で囲み、idを設定」」
りんご
「「３　　　ーーーーーーーーーーーーーーー」」 <script> 「「１
〜
内のinnerHTMLを取得」」 var str = document.getElementById("sample").innerHTML; 「「３〜 ここにreplace処理を記述 〜」」 </script>




然し乍らページ内でreplaceさせたい範囲は１箇所ではないことも多々あるはず。

複数の範囲に対して共通でJavaScriptを適用させたいときは、「id」ではなく「class」を指定してあげましょう。

idとclassについて

◼︎「id」はページ内の固有のtagを識別させるセレクタなので、１つのページ（HTMLファイル）内に同じidのtagが存在してはいけません。

◼︎ページ内の複数のtagに対して共通のセレクタを指定したいときは、「class」を使って識別名を添えます。

HTML

りんごA
りんごB

ブラウザ


この「clsample」に対してreplaceメソッドを適用させていきましょう。



replaceしてみましょう。

class要素の取得は、getElementsByClassName( )を使います。

「「１//class要素を取得する」」 var cl = document.getElementsByClassName("clsample");

「getElement〜」ではなく、「getElements〜　(複数形）」であることに注意してください。

innerHTMLも取得してreplaceさせてみましょう。これまでの手順でやってみます。

「「１//divのHTML（文字列）を取得」」 var clstr = cl.innerHTML; 「「１//取得した文字列をreplace （テキストの文字色を赤にするCSSを追加）」」 clstr = clstr.replace(/りんご/g,'りんご'); 「「１//元のHTMLコードをreplaceしたものに置き換える」」 document.getElementsByClassName("clsample").innerHTML = clstr;

では実行してみま・・。

ブラウザ






んんんん!?












なぜだ。

💧原因を調べてみましょう。





型をしらべてみる。

replaceメソッドをちゃんと適用させるには、その対象がString（文字列）でなくてはいけません。
先ほど変数clstrを作ってclのinnerHTMLを代入しましたが、ちゃんとStringが取得できているのか、調べてみます。

「「１//divのHTML（文字列）を取得」」 var clstr = cl.innerHTML; 「「１//出力してみる」」 console.log(clstr); 　　「「１▼ undefined」」

「undefined」・・見つかりません、となります。String（文字列）が取り出せていないということですね。
これではreplaceを行うことができません。

codeをもう１つ遡って調べてみましょう。

「「１//class要素を取得する」」 var cl = document.getElementsByClassName("clsample"); 「「１出力してみる」」 console.log(cl); 「「１　▼ HTMLCollection(2) [div.clsample, div.clsample]」」

「HTMLCollection」なるものが出力されました。見たところArray（配列）っぽいが・・



HTMLCollection。

HTMLCollectionとは、HTML要素の集合を表すオブジェクトです。
「配列」とは別物とされていますが、添字をつけて要素を取り出したり、length(要素数)というプロパティを持っていて、配列のように扱うことができます。

試してみましょう。

var cl = document.getElementsByClassName("clsample"); 「「１このHTMLCollectionの要素数をしらべる」」 console.log(cl.length); 「「１　▶︎ ２」」 「「１添字を使って１つ目の要素を取り出す」」 console.log(cl[0]); 「「１　▶︎
りんごA
」」

Collection内の要素の数、そして要素の内容を取り出すことができました。
扨（さて）、この１つ目の要素からinnerHTML（文字列）を取り出すことはできるのでしょうか。変数を作って調べてみます。名前はclElementにしました。

var clElement = cl[0].innerHTML; console.log(clElement); 「「１　▶︎りんごA」」 console.log(clElement); 「「１　▶︎string」」

文字列を取得することができたようです。



要素の数だけreplaceを繰り返す。

それではHTMLCollectionの全ての要素に対してreplaceを仕込んでいきましょう。
lengthプロパティで要素の数を取得し、for文を使ってinnerHTML取り出し → replaceさせていきます。

var cl = document.getElementsByClassName("clsample"); 「「１//要素の数だけ処理を繰り返す」」 for (i = 0; i < cl.length; i++) { 「「１//HTMLを取り出す」」 var clstr = cl[i].innerHTML; 「「１//replace。 （テキストの文字色を赤にするCSSを追加）」」 clstr = clstr.replace( /りんご/g, 'りんご' ); 「「１//元のHTMLソースをreplaceしたものに置き換える」」 document.getElementsByClassName("clsample")[i].innerHTML = clstr; }

扨、うまくいくかな？プレビューしてみましょう。

ブラウザ

ついに成功

やっと動いてくれましたね〜♪
試行錯誤したのちの成功、うれしい瞬間です。





とても便利なスクリプト。

今回作ってきたものはすごく便利なcodeです。これをHTMLファイルに仕込んでおけば、class属性を指定するだけで好きな箇所にJavaScriptを適用させることができます。
もちろん属性を指定する場所は<div> 〜 </div>に限らず、<p>でも<h1>でもかまいません。

classを指定しながらHTMLコードを書いていきます。

HTML

りんご

本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文

りんごはふつう赤いよ。

本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文

りんごについて詳しく知る

青いりんごもあるよ。

ブラウザ

てきとーにコードを書きなぐってみましたが、ちゃんとreplaceされています。
class要素にreplaceメソッドを適用させるのには一苦労でしたけども。自分好みのreplaceを仕込んで、実用的なwebコードエディタを作ってみてください♬





「ふ」です。

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

🐧 twitter 🐧