[JS] 動的にテキストを変更

タグ :

jQuery の勉強をまとめるシリーズです。
今回は動的にテキストを変更する API についてまとめます。

テキストの変更

jQuery で html 要素のテキストを変更するには、「text()」を使用します。
引数には変更したい文字列を設定します。

[ 構文 ]
.text(“文字列”)
[ コード ]
$(function() {
	$("button").click(function () {
		$("div p").text("変更されました");
	});
});

3行目の text() でテキストを変更します。

<h4>テキストの変更</h4>
<div>
	<p>テキスト変更できるかな?</p>
</div>
<button>変更</button>

3行目の p タグのテキストを変更させます。

<div>
	<p>変更されました</p>
</div>

p 要素のテキストが変更されます。

ボタンクリックでテキストの文字列が変更します。
文字列を扱う処理なので、jsファイルの保存時の文字コードを「UTF-8」とすることに気を付けましょう。文字化けしたら、まずエンコーディングを疑いましょう。

テキストの取得

.text() の引数に何も入れないと、現在のテキストの文字列を取得してきます。

[ 構文 ]
.text()
[ コード ]
$(function() {
	$("button").click(function () {
		alert($("div p").text());
	});
});

3行目の text() で文字列を取得し、それを alert() にてアラート表示させています。

<h4>テキストの取得</h4>
<div>
	<p>テキスト取得できるかな?</p>
</div>
<button>取得</button>

3行目の p タグのテキストを取得させます。

ボタンクリックでテキストの文字列をアラート表示します。
このテキストの取得は、色々な処理に応用ができます。主に事務処理的なアプリケーションに使用出来ると思いますが、文字列比較、間違いチェックなど、想像は膨らみます。

htmlタグを挿入

jQuery で html 要素に html タグを含む文字列を挿入するには、「html()」を使用します。

[ 構文 ]
.html(“<タグ>文字列“)
[ コード ]
$(function() {
	$("button").click(function () {
		$("div p").html("<b>太字に変更されました</b>");
	});
});

3行目の html() で引数値を挿入します。

<h4>htmlタグを含む文字列に変更</h4>
<div>
	<p>このテキストが変更されるよ</p>
</div>
<button>変更</button>

3行目の p タグ内を変更させます。

<div>
	<p><b>太字に変更されました</b></p>
</div>

p 要素のテキストが変更されます。

ボタンクリックでテキストの文字列が太字で変更されます。
html の要素ごと挿入できるので、かなり動的な処理に役立ちそうです。
クラスを持った要素の追加をすることで、さらに可変的な変更が可能となります。

htmlタグごと取得

.html() の引数に何も入れないと、.text() と同じように現在のテキストを html タグ付きで取得してきます。

[ 構文 ]
.html()
[ コード ]
$(function() {
	$("button").click(function () {
		$(".div2").html($(".div1").html());
	});
});

3行目の右側の html() で div1 の html タグごと取得し、
左側の html() で div2 へ挿入しています。

<h4>htmlタグのコピー</h4>
<div class="div1">
	<p style="color:blue">このテキストがコピーされるよ</p>
</div>
<div class="div2">[ここにコピー]</div>
<button>コピー</button>

3行目の p タグをコピーします。

<div class="div1">
	<p style="color:blue">このテキストがコピーされるよ</p>
</div>
<div class="div2">
	<p style="color:blue">このテキストがコピーされるよ</p>
</div>

div2 の p 要素が変更されます。

ボタンクリックで .div1 の要素を .div2 へコピーします。
スタイルごとコピーしますが、div2 用のスタイルを CSS で用意しておけば、要素構造はそのままで、スタイルだけ変更されたテキストがコピーできます。

オブジェクトの値を変更

jQuery で html オブジェクトであるテキストボックスの値を変更するには、「val()」を使用します。
引数には、.text() と同じように文字列を入れます。
セレクターによるオブジェクトの指定は、テキストの記述とはちょっと違って、「$(“input:text”)」のように記述します。

[ 構文 ]
.val(“文字列”)
[ コード ]
$(function() {
	$("button").click(function () {
		$("div input:text").val("変更されました");
	});
});

3行目の val() の値に変更されます。

<h4>テキストボックスの変更</h4>
<div>
	<input type="text" value="ここの値が変更されるよ" style="width:200px" />
</div>
<button>変更</button>

3行目の p タグをコピーします。

<div>
	<input type="text" value="ここの値が変更されるよ" style="width:200px" />
</div>

テキストボックス内の value の値は変更されませんが、表示は変更されます。

ボタンクリックでテキストボックスの値を変更します。
入力フォームの初期値に「入力してください」などを入れる場合は、この機能が使えます。
ページのロード時に初期値を入力させたりすると、ユーザビリティの向上になると思います。

オブジェクトの値を取得

.val() の引数に何も入れないと、.text() と同じように現在の値を取得してくれます。

[ 構文 ]
.val()
[ コード ]
$(function() {
	$("button").click(function () {
		$(".div2 p").text($(".div1 input:text").val());
	});
});

3行目の val() でテキストボックス内の文字列を取得します

<h4>テキストボックスの値を取得</h4>
<div class="div1">
	<input type="text" value="ここのテキストがコピーされるよ" style="width:200px" />
</div>
<div class="div2">
	<p>[ここにコピー]</p>
</div>
<button>コピー</button>

3行目の p タグをコピーします。

<div class="div1">
	<input type="text" value="ここのテキストがコピーされるよ" style="width:200px" />
</div>
<div class="div2">
	<p>ここのテキストがコピーされるよ</p>
</div>

div2 の p 要素のテキストが変更されます。

ボタンクリックでテキストボックスの値を div2 の p 要素へコピーします。
入力フォームの入力チェックなど、色々な場面で応用ができそうです。
テキストボックス以外にも、チェックボタンやラジオボタンの値も取得することができます。

まとめ

動的なテキストの変更はよく使用すると思います。
事務的な作業やフォームの入力確認で使用するアプリケーションには、文字列操作は必須です。

文字列の比較以外での機能として、初期値やボタンクリックでのテキストの自動挿入があげられます。
そんなに必須性はありませんが、ユーザビリティを高める上では大事な機能です。
ユーザーの使いやすさを考えて色んな機能を考えるのも楽しいかもしれないですね。

Share

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

Comment

コメントを残す

*がついている欄は必須項目です。

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed