ベストアンサー

文字列の改行を自動化したい

2017/08/21 12:11

文字列の改行を自動化したいのですが、textareaないのテキストで改行したいところをクリックすると、改行できるようにすることはできますか？ javascriptでブラウザ上で行おうと思っています。無理な場合は選択してエンターを押しまくるのが大変なのでせめてサブライムのように改行したいところを一括選択してエンター一回でできるようにできないでしょうか？いつもサブライムで行うのですが面倒なので、rextareaないでサブライムのように一括置換や一括削除などもできると便利です。もちろんメーラにそのような機能があったり、そのようなサービスがあればそれでも構わないので教えてください。

okweb12345
お礼率64% (227/350)

JavaScript
回答数5
ありがとう数2

みんなの回答 （5）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ballville
ベストアンサー率47% (233/487)

2017/08/21 15:31 回答No.1

「表示」ボタンを押したあと、ブラウザの地の画面に出てくるテキストの文字をクリックすると改行します。「出力」ボタンを押すと、改行の入ったテキストがテキストエリアに出力されます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>test</title> </head> <body> <textarea>ここに文章を入力してください</textarea> <button>表示</button> <button>出力</button> <textarea id="out" readonly></textarea> <div id="disp"></div> <script type="text/javascript"> var strArray; function addCR( obj ){ id =obj.id; strArray[ id - 0 ]+='\r\n'; alert(obj.parentNode.outerHTML) obj.innerHTML+='<br>'; } function disp(){ var str=document.getElementsByTagName('textarea')[0].value; strArray=str.split(''); var div =document.getElementById('disp'); div.innerHTML=''; var aProto =document.createElement('a'); for( var i =0, len=strArray.length; i<len; i++ ){ var a =aProto.cloneNode(1); a.onclick=function(){ addCR(this); } a.innerText=strArray[ i ]; a.id =i div.appendChild(a); } } function output(){ var outText =document.getElementsByTagName('textarea')[1]; outText.value =strArray.join("") } document.getElementsByTagName('Button')[0].onclick=function(){ disp() } document.getElementsByTagName('Button')[1].onclick=function(){ output() } </script> </body> </html>

質問者

お礼 2017/08/21 16:04

https://codepen.io/anon/pen/KvoRGJ に再現しましたが何も起きません。

質問者

補足 2017/08/21 21:00

ありがとうございます。確かにできているのですが、なぜ、クリックすると改行するのでしょうか？クリックイベントの際にbrをその左右の文字の入れているのでしょうか？

その他の回答 (4)

ballville
ベストアンサー率47% (233/487)

2017/08/24 13:29 回答No.5

>変数A += 変数Bは、変数A = 変数B+変数Aなので、違います。変数A += 変数Bは、変数A = 変数A+変数Bです。変数A、変数Bの中身が数値なら、変数A+変数Bも変数B+変数Aも同じ値になりますが、この場合文文字列なので同じになりません。たとえば、 var a='A'; var b='B'; のとき a+bは文字列'AB'、b+aは’BA’となります。 >初心者なのでソースだけではわかりません言葉（自然言語）で説明したのでは、おばかなコンピュータは理解できません。そこで、コンピュータに理解できるよう、あいまいな解釈が生じない、これ以上ないほど分かりやすく説明するための記述法としてプログラム言語（今の場合はjavascript）が生まれました。　なので、コンピュータになった気分で「ソース百遍意自（おの）ずから通ず」と熟読すれば分かるはずです。行数も短いですから。　いや、見ただけでは分からない、と思ったら次を読んでください。 >もう少し具体的に何をやっているかソースが出ているので、自分でいじり回せば、具体的な動きが分かるはずです。現在のソースは、クリックした場所で改行しているのですが、クリックした文字をカッコでくくるにはソースのどこをどうすればいいかなど、あれこれ自分でやってみるのが具体的な動きを理解する一番の早道です。　okweb12345 さんが、参考サイトとしてあげたCodepenでは、そんな実験・トライアンドエラーが簡単にできるようです。ぜひ、チャレンジしてください。

ballville
ベストアンサー率47% (233/487)

2017/08/22 05:19 回答No.4

表示の方はおっしゃる通り、後ろにbrタグを付加しています。一方、文字配列の方は当該する文字の後ろに'\r\n'を加えています。 addCR関数中のalertのコメントを外すと、わかりやすいかもしれません。数十行のソースなので、理解するのは難しくないと思います。

ballville
ベストアンサー率47% (233/487)

2017/08/21 20:06 回答No.3

OKwaveの仕様なのか、タブスペースが反映されません。なので、var、functionなどの後ろのタブが消えてしまっています。コピペの際、注意してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>test</title> </head> <body> <textarea>ここに文章を入力してください</textarea> <button>表示</button> <button>出力</button> <textarea id="out" readonly></textarea> <div id="disp"></div> <script type="text/javascript"> var strArray; function addCR( obj ){ id=obj.id; strArray[ id - 0 ]+='\r\n'; //alert(obj.parentNode.outerHTML) obj.innerHTML+='<br>'; } function disp(){ var str=document.getElementsByTagName('textarea')[0].value; strArray=str.split(''); var div=document.getElementById('disp'); div.innerHTML=''; var aProto=document.createElement('a'); for( var i =0, len=strArray.length; i<len; i++ ){ var a=aProto.cloneNode(1); a.onclick=function(){ addCR(this); } a.innerText=strArray[ i ]; a.id=i div.appendChild(a); } } function output(){ var outText=document.getElementsByTagName('textarea')[1]; outText.value=strArray.join("") } document.getElementsByTagName('Button')[0].onclick=function(){ disp() } document.getElementsByTagName('Button')[1].onclick=function(){ output() } </script> </body> </html>

参考URL：: https://codepen.io/anon/pen/xLWmZv

ballville
ベストアンサー率47% (233/487)

2017/08/21 15:39 回答No.2

varキーワード、functionキーワード等の後ろのタブスペースが消えてしまったようです。コピペする際、ご注意ください。

質問者

お礼 2017/08/22 10:34

＞＞＞ functionaddCR( obj ){ id=obj.id; strArray[ id - 0 ]+='\r\n'; alert(obj.parentNode.outerHTML) obj.innerHTML+='<br>'; } 恐らくここで、テキストをクリックしたとき、クリックした場所で改行されるようですが、もう少し初心者にわかるように解説いただけませんか？これは何を再代入しているのですか？ id=obj.id; 変数A += 変数Bは、変数A = 変数B+変数Aなので、配列になにかしているのですか？ strArray[ id - 0 ]+='\r\n'; なぜこれでクリックしたところにbrがつくのでしょうか？ obj.innerHTML+='<br>';

質問者

補足 2017/08/24 12:10

初心者なのでソースだけではわかりません。もう少し具体的に何をやっているか教えていただければ幸いです。

文字列の改行を自動化したい