処理の概要
表示している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