[JS] テキストファイルの操作

タグ :

jQuery の勉強をまとめるシリーズです。
今回は動的にテキストファイルの操作についてまとめます。

サイト内で表などの一覧を表示することがあると思いますが、その表に変更があった場合、HTML 内の表部分を変更するのは手間になると思います。
そんな時は、テキストファイルで表のデータを用意しておき、そのデータを表に当てはめるというやり方がオススメです。変更時はそのテキストファイルのデータを変えるだけでよくなります。

そのためには、テキストファイルに書かれたテキストを取得する必要があります。jQuery でそれを行うメソッドは多数ありますが、どれもとても簡単です。どのメソッドも基本的にはリクエスト通信にて取得を行います。

取得データをそのまま表示する場合

取得したデータをそのまま HTML の要素へ挿入するときに使用します。
HTML ファイルを読み込むときに多く利用されます。

[ 構文 ]
.load( ファイルパス )
[ コード ]
$(function() {
	$("div.file p").load("text.txt");
});

2行目で読み込むファイルを指定します。

<h4>テキストファイルの操作</h4>
<div class="file">
	<p></p>
</div>

3行目の p 要素にテキストが挿入されます。

一行目
ニ行目
三行目

テキストファイルを用意しておきます。

<div class="file">
	<p>一行目
	ニ行目
	三行目</p>
</p>
</div>

p 要素内にテキストが挿入されます。

取得するファイルがテキストファイルなので、テキストの改行が HTML コードの改行コードと違うことから、表示では改行がされていません。
ですが、テキスト自体はそのまま取得できているようです。

取得データを編集して表示する場合

取得したデータをちょっと変更させてから表示させたい場合にはこちらを使用します。

[ 構文 ]
$.get( ファイルパス, パラメータ, コールバック )
[ コード ]
$(function() {
	$.get("text.txt", function(data){
		html = data.replace(/[\n\r]/g, "<br />");
		$("div.file p").html(html);
	});
});

2行目で読み込むファイルを指定します。
3行目にて取得したデータの改行コードを変換しています。4行目で HTML 要素へ挿入しています。

<h4>テキストファイルの操作</h4>
<div class="file">
	<p></p>
</div>

3行目の p 要素にテキストが挿入されます。

一行目
ニ行目
三行目

テキストファイルを用意しておきます。

<div class="file">
	<p>
	"一行目"<br>
	"ニ行目"<br>
	"三行目"
	</p>
</p>
</div>

p 要素内にテキストが挿入されます。

パラメータは無しなので無視しています。
取得したデータ内の改行コードを HTML 改行コードに変換しています。
そのデータを HTML 要素へ挿入することでテキストファイルと同じデータを表示できています。

Ajaxを用いて取得

処理は $.get() と同じですが、複雑な Ajax を用いているので、通信に失敗した場合や完了後の処理などを細かく指定することが可能です。今回は成功時のみの処理を記述します。

[ 構文 ]
$.ajax({ URL, タイプ, 処理 })
[ コード ]
$(function() {
	$.ajax({
		url: "text.txt",
		type: "get",
		success: function(data){
			html = data.replace(/[\n\r]/g, "<br />");
			$("div.file p").html(html);
		}
	});
});

2行目〜の処理が Ajax の設定部分になります。
3行目でアクセスするファイル名を指定します。
4行目で実行する処理のタイプを指定します。
5行目〜8行目で実行した Ajax が成功した時に行う処理を記述します。

<h4>テキストファイルの操作</h4>
<div class="file">
	<p></p>
</div>

3行目の p 要素にテキストが挿入されます。

一行目
ニ行目
三行目

テキストファイルを用意しておきます。

<div class="file">
	<p>
	"一行目"<br>
	"ニ行目"<br>
	"三行目"
	</p>
</p>
</div>

p 要素内にテキストが挿入されます。

$.get() と同じように表示されています。
少し記述が複雑にはなりますが、細かな処理の指定ができるようになります。
今回は成功時(success)のみですが、失敗時(error)や完了後(complete)の処理も同じように指定する事が可能なので、後々の事を考えると非常に使えると思います。

まとめ

冒頭にも書きましたが、ページ内の表を変更する際にテキストファイル化しておくと修正が楽になると思います。その他にもテキストファイルを読み込んでテキストを取得してくるという手法は何かと使えると思います。

また、何かを説明する文章というのは使い回すことが多いと思いますが、そんな説明文もテキストファイル化しておくと便利です。複数のページに使い回した文章に変更が必要になった場合、全てのページの文章を修正するのはかなり面倒な作業になります。そこでテキストファイルを読み込むという手法で表示させておけば、テキストファイル一つを修正するだけで済むようになります。

ただ、通信を使用するので、通信に失敗する場合も考慮しておく必要はあります。毎回確実に表示させたいというページには向かないかもしれません。

Share

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

Comment

コメントを残す

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

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed