JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでページ読み込み時にテキストを自動的に強調表示する方法

はじめに

ページが読み込まれるたびに特定のテキストを自動的に強調表示したい場合、forループと<span class="yourColorName">の仕組みを組み合わせることで簡単に実現できます。この手法では、あらかじめ指定したキーワードをJavaScriptが検出し、対応するCSSクラスを適用して文字色を変更します。

処理の流れ

  1. document.getElementById() で対象となるHTML要素を取得します。
  2. innerHTML.split(" ") を使って、テキストを半角スペースで区切って配列化します。
  3. for ループで各単語を順番にチェックし、「blue」や「yellow」などのキーワードに一致した場合、その単語を <span> タグで囲みます。
  4. join(" ") で配列を再び文字列に結合し、元の要素の innerHTML に書き戻します。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
    .yellow {
        color: yellow;
    }
    .blue {
        color: blue;
    }
</style>
</head>
<body>
<h1 id="pageLoads">My yellow Words,your blue Words</h1>
<script>
    var ids = document.getElementById("pageLoads");
    var loadColorWords = ids.innerHTML.split(" ");
    for(var i = 0; i < loadColorWords.length; i++) {
        if(loadColorWords[i] == "blue") {
            loadColorWords[i] = "<span class='blue'>" + loadColorWords[i] + "</span>";
        }
        if(loadColorWords[i] == "yellow") {
            loadColorWords[i] = "<span class='yellow'>" + loadColorWords[i] + "</span>";
        }
    }
    ids.innerHTML = loadColorWords.join(" ");
</script>
</body>
</html>

実行手順

上記のプログラムを実行するには、まずファイル名を anyName.html（index.html） として保存します。次に、VS Codeエディタでそのファイルを右クリックし、「Open with Live Server」を選択してブラウザで開いてください。

実行結果

JavaScriptでページ読み込み時にテキストを自動的に強調表示する方法

ページを開くと、「yellow」という単語は黄色に、「blue」という単語は青色にそれぞれ強調表示されます。ページを再読み込みするたびにJavaScriptが自動的に動作するため、常に同じ強調表示が維持されます。

応用ポイント

  • 強調表示したいキーワードや色を増やす場合は、CSSに新しいクラスを追加し、if 文を同様に増やすだけで対応できます。
  • 大文字・小文字を区別せずに判定したい場合は、比較前に toLowerCase() を使うとより堅牢になります。

  1. JavaScriptでテキストボックスを選択することは可能ですか？select()メソッドの使い方を解説

    はい、可能です。JavaScriptのselect()メソッドを使えば、テキストボックス内のテキストを選択状態にすることができます。まずは、テキスト入力欄を作成してみましょう。 テキストボックスとボタンの作成 Enter your Name:<input type="text" id="txtName" value="John"> <br> <button type="button" onclick="check()">Select Text Box<

  2. JavaScriptで<strong>タグにテキストを設定する方法

    Webページ上のテキストを動的に書き換えたい場面は多くあります。この記事では、jQueryを使用して<strong>タグ内のテキストをJavaScriptで変更する方法を、手順とコード例とともにわかりやすく解説します。手順1：<strong>要素を用意するまず、HTML内にテキストを差し替えたい<strong>要素を配置します。後からJavaScript側でこの要素を指定できるよう、id属性を付けておくのがポイントです。<strong id="strongDemo">Replace This strong tag</st