テキストの変更/JavaScript

テキストを変更する

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

　ボタンをクリックすると、ボタン横の文字が「テスト」から「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秒単位に自動で変更されます。

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

<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」に書き換えています。このため、文字列の途中でも置換が可能で、特殊文字を使う事も出来ます。

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