【JavaScript】指定した文字列を持つすべての要素を取得する

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptで指定した文字列を持つすべての要素を取得する方法をご紹介しています。

JavaScriptで指定した文字列を持つすべての要素を取得したいな。良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

本記事でやりたいこと

指定した文字列を持つすべての要素を取得することです。指定した文字列というのは、文字列の中に含まれている部分一致ではなく完全一致する文字列が対象となります。

例えば下記のHTMLがあるとします。

<span>※</span>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<span>※</span>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<span>※</span>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>

上記の中からの文字列を持つすべての要素を取得するといった意味合いになります。

指定した文字列を持つすべての要素を取得する

指定した文字列を持つすべての要素を取得します。要素を絞り込む方法は何通りもパターンがあると思いますが、ここではArrayfilterメソッドを使用して指定した文字列を持つ要素を抽出し、新しい配列として取得してみたいと思います。

HTML

<span>※</span>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<span>※</span>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<span>※</span>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>

JavaScript

//ページ内のすべての要素を取得する
const elements = document.querySelectorAll('*');

//配列を走査してテキストが「※」の要素を取得して新しい配列を生成する
const filterElements = Array.from(elements).filter((element)=>{
    return element.textContent === '※'; 
});

//取得した要素の文字色を赤に変更する
for(el of filterElements){
    el.style.color = 'red';
}

filterを実行している部分は省略することも可能です。

const filterElements = Array.from(elements)
    .filter((element)=> element.textContent === '※');

実行結果

See the Pen 7716 by ryohei (@intotheprogram) on CodePen.

これで指定した文字列を持つすべての要素を取得することができました。

上記例では処理の最初の段階でページ内のすべての要素を取得しています。パフォーマンスを考えると取得する要素は絞った方が良いと思いますので、実装される場合はセレクターに指定する要素を限定してご利用ください。

最後に

本記事では、要素の絞り込みにArrayfilterメソッドを使用しました。Arrayのメソッドは種類が多く、他にも便利なメソッドがたくさんあります。filterメソッド一つとっても多くの使い方ができますので、配列を走査する場合は積極的に取り入れてみてくださいね!

以上、JavaScriptで指定した文字列を持つすべての要素を取得する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら