処理の概要

表示しているcsvからリンクリストを生成して表示する

処理のフロー：

　(1)実行ボタンを押下する
　(2)テキスト1から文字列を取得する
　(3)文字列からURLを取り出してリンクするように置換する
　(4)改行コードを変換
　(5)テキスト2に文字列を表示
　(6)div領域に生成したリンクを表示する

画面イメージ

画像１の実行ボタンを押すと画像２のようになります。

#####画像１

#####画像２

ソースコード

index.html

<body>
	<textarea  id="userText">
グーグル,https://www.google.co.jp/
ヤフー,http://www.yahoo.co.jp/
フェイスブック,https://www.facebook.com/
	</textarea>
	<br>
	<input type="button" id="execButton" value="実行"><br>
	<textarea id="output"></textarea>
	<div id="tranceLinker"></div>
</body>

main.js

// DOMの準備後に実行する内容
$(function() {
	// ［実行］ボタンを押した時の処理を設定
	$("#execButton").click(function() {
		// 文字列を取得
		var text = $("#userText").val();
		// リンクに変換
		text = text.replace(/^(.+?),(.+?)$/gm, function(s, s1, s2) {
			return '<a href="' + s2 + '">' + s1 + '</a>';
		});
		// 改行を変換
		text = text.replace(/\n/g, "<br>\n");
		// 文字列を出力
		$("#output").val(text);
		// プレビュー
		$("#output2").html(text);
	});
});

ポイント

html：
(1)テキストエリアに表示するcsvは、タブを入力すると後々おかしくなる。
js：
(1)replaceの書式は、パラ1が検索が一致した部分の全体の文字列。パラ2が１番目の丸括弧内の文字列、パラ3は２番目の丸括弧内の文字列…丸括弧で一致した文字列を1つずつ得られる。
(2)リンクの生成は、ダブルとシングルで変数をセットする
(3)「$("#execButton").click(function() {…})」は無名関数の使用

 text = text.replace(/^(.+?),(.+?)$/gm, function(s, s1, s2) {
            return '<a href="' + s2 + '">' + s1 + '</a>';

参考資料

JavaScript(仕事の現場でサッと使える！デザイン教科書)　p160