<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>local file save</title>
<script>
window.onload = function(){
//<div id="content">内にテキストを表示する
var text = "";
for ( var i = 0; i < 5; i++ ) {
text = text + "テキストテキストテキスト" + "<br>\n";
}
var contentArea = document.querySelector("#content");
contentArea.innerHTML = text;
}
</script>
</head>
<body>
<div id="content"></div>
<input type="button" value="保存" onclick="save();">
</body>
</html>
テキストを変数に入れて、指定の箇所に表示する時、改行を入れる必要があるならば、 + "
\n"を入れておくと、
このように改行有りで表示されます。この状態でファイルに出力すると、
テキストテキストテキスト<br> テキストテキストテキスト<br> テキストテキストテキスト<br> テキストテキストテキスト<br> テキストテキストテキスト<br>
このように
が入った状態で出力されます。この<br>を削除してファイル出力を行いたい場合は、ファイル出力の関数で
function save(){
//<div id=”content”>で囲まれた箇所の文章を取得する
var content = document.querySelector("#content").innerHTML;
//文中にある<br>をすべて消す
var content = content.replace(/<br>/g, "");
//取得した文章をtextファイルの形式に変換
//content.trim()は文章の前後のスペースを削除
var blob = new Blob([content.trim()], {type : "text/plain"});
//ダウンロードリンクを付ける
var link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
//ダウンロードするファイル名を決めます
link.download = "file.txt";
//画面に一瞬だけダウンロードリンクを表示し、ファイルのダウンロードを行う
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
ファイルを出力する際に、var content = content.replace(/<br>/g, "");の処理を挟んでおくと、文中にある
はすべて消えます。
テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト
<br>と\nですが、<br>はHTMLタグの一種で、ブラウザがHTMLを読み込んで表示する際、<br>を含む文字列で<br>の箇所で改行されるものです。\nは改行コードで、ソースコードを表示すると、\nの箇所で改行されています。
var content = content.replace(/<br>/g, "");ですが、変数(ここではcontent)の中に入っている文字列で、第一引数が置換(文字を指定の文字で置き換える)したい文字で/<br>/gの様に//gで挟んで中に置換したい文字(<br>)を入れることで、文中にあるすべての<br>を第二引数(ここでは空文字)に変えるという処理を行います。第一引数で//gではさまなかった場合は、変数内で最初に出現した<br>を置換するという処理になります。
0 件のコメント:
コメントを投稿