テキストの変更/JavaScript

JavaScriptで、HTML中のテキスト(文字)を変更するサンプルコードです。

最初に簡単なサンプルを示します。ページの下に行く程複雑になりますが、より柔軟にテキストを変更できます。

目次は、以下の通りです。

  1. テキストを変更する
  2. 時間が経過すると動的にテキストを変更する
  3. 要素の途中から変更する
  4. 要素のどこからでも変更する

テキストを変更する

 テキストを変更するデモです。

テスト

 ボタンをクリックすると、ボタン横の文字が「テスト」から「JavaScriptで変更」に置換されます。

 サンプルコードは、以下の通りです。

【テキストを変更するサンプルコード】
<button type="button" onclick="func1();">変更</button>
<span id="test1">テスト</span>

<script>
function func1() {
    var x = document.getElementById("test1");
    x.innerHTML = "JavaScriptで変更";
}
</script>

 ボタンがクリックされるとfunc1が呼び出され、赤字分部でspan要素のテキストが変更されます。

 この方法は、<span>でなくても<div>や<p>等でも使えます。

 尚、赤字分部をx.innerHTML = x.innerHTML + "JavaScriptで追加";にすると、元の「テスト」を残したまま「JavaScriptで変更」が追加されます。

 又、改行として<br>が使えます。タグを解釈させたくない時は、赤字分部をx.textContent = "JavaScriptで変更";等にします。x.textContentもテキストを変更します。

時間が経過すると動的にテキストを変更する

 以下のテキストは、10秒単位に自動で変更されます。

テスト1

 サンプルコードは、以下の通りです。

【時間が経過すると動的にテキストを変更するサンプルコード】
<span id="test2">テスト1</span>

<script>
setInterval(func2,10000);

function func2() {
    var x = document.getElementById("test2");
    switch (x.innerHTML) {
        case "テスト1":
            x.innerHTML = "テスト2";
            break;
        case "テスト2":
            x.innerHTML = "テスト3";
            break;
        case "テスト3":
            x.innerHTML = "テスト1";
    }
}
</script>

 赤字分部で10秒毎に関数func2を呼び出します。時間はms単位で指定します。又、switch文により、今のテキストの内容によって書き換えを行っています。

要素の途中から変更する

 以下のように、要素の途中から変更する事も出来ます。

テストテスト

 「テストテスト」と並んでいたのが、後のテストが「JavaScriptで変更」に変わります。

 これは、以下のようになっています。

【要素の途中からテキストを変更するサンプルコード】
<button type="button" onclick="func3();">変更</button>
<span>テスト<span id="test3">テスト</span></span>

<script>
function func3() {
    var x = document.getElementById("test3");
    x.innerHTML = "JavaScriptで変更";
}
</script>

 赤字のように、変更する所を<span>で囲ってfunc3で変更しています。この方法は簡単ですが、事前に変更する所が分かっている時しか使えません。

要素のどこからでも変更する

 要素のどこからでも変更する事も出来ます。

テスト

 「テスト」と表示されていたのが、ボタンをクリックすると「テJavaト」と表示されます。

 これは、正規表現を使っています。

【要素のどこからでもテキストを変更するサンプルコード】
<button type="button" onclick="func4();">変更</button>
<span id="test4">テスト</span>

<script>
function func4() {
    var x = document.getElementById("test4");
    x.innerHTML = x.innerHTML.replace(/ス/,"Java");
}
</script>

 赤字分部は、正規表現を使って「ス」を検索し、「Java」に書き換えています。このため、文字列の途中でも置換が可能で、特殊文字を使う事も出来ます。

 正規表現については、「正規表現の使い方」をご参照下さい。

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