- ベストアンサー
初心者にわかるソースコード解説と改行の実装方法
- 初心者なのでソースコードだけではわからないです。ソースコードの具体的な内容と初心者に分かりやすく解説していただけませんか？
- 「id=obj.id;」は何を再代入しているのでしょうか？また、「strArray[id - 0] += '\r\n';」は何のために行っているのですか？
- 「obj.innerHTML += '<br>';」はなぜクリックした場所に改行を追加するのでしょうか？改行の実装方法について教えてください。
- okweb12345
- お礼率64% (227/350)
- JavaScript
- 回答数8
- ありがとう数7
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
（人の作ったプログラムなので推測がまじりますが） まず、”表示”ボタンで実行されるdisp関数では、 textareaに書かれた文字列を１文字ずつに分解して aタグにしています。 このとき a.onclick=function(){addCR(this);} a.innerText=strArray[ i ]; a.id=; としているので、各aタグのidには、何文字目かを示す値が代入されています。 つまりtextareaの文字列が たとえば"xyz"なら <a id=0 onclick="addCR(this)">x</a> <a id=1 onclick="addCR(this)">y</a> <a id=2 onclick="addCR(this)">z</a> を作っているイメージですね。 addCR内の id=obj.id; は上のaタグのidプロパティの値を idという変数に代入しているだけです。 strArray[ id - 0 ]+='\r\n'; では、strArrayのid番目に DOSテキストとしての改行コード(\r\n）を追加しています。 "xyz"だと strArray[0]は "x" strArray[1]は "y" strArray[2]は "z" なので、id=0のaタグがクリックされたら strArray[0]は "x"から "x\r\n" に変更となります。 これで最終的に”出力”ボタンを押してstrArray[]が１つの文字列に連結されると ”x\r\nyx” となります。 なお、strArray[id] =～;としないでstrArray[ id - 0 ]と無駄に見える演算をしているのは、 文字列から数値へ暗黙の変換をさせるためだと思われます。 obj.innerHTML+='<br>'; のほうは、１文字目だと ”x"が"x<br>" のようになるだけなので、わかりますよね。
その他の回答 (7)
- superside0
- ベストアンサー率64% (463/719)
> splitは > str配列の中身のテキストを一文字ずつ分離して、しかもそれを配列に代入してくれ > る関数という事ですかね。 はい。ニュアンス的には、大体そんな感じです。 正確には、「str配列」ではなくて、strには文字列が入っていて、 splitは関数ではなくて、メソッドになりますけれども。 > var strArray = [ ]; > これは変数strArrayに配列を入れているのではないのですか？ ですね。 なので、strArray変数が初期値として空の配列だと宣言していることになります。 JavaScriptでは、このあたりの書き方には、いろいろあって コーディングする人の慣れや癖みたいなものが出やすいので 人の作ったものだと読み難いこともあるでしょう。 >ではもしこの配列を変数に入れたい場合はどうなるのでしょうか？ var strArray = [ ]; のあとで、この配列の参照（値ではなくて）を別のa変数に代入したいのであれば var a = strArray; のようにすれば、”配列の参照”が代入できます。 ちょっと、ご質問の意図や、何に混乱されているのが分からないですが JavaScriptでの配列について説明をされているサイトは沢山あるので https://so-zou.jp/web-app/tech/programming/javascript/grammar/array/#no1 等を参考にされてはどうでしょう。
- superside0
- ベストアンサー率64% (463/719)
> これは配列の宣言だったのですか？ 説明に語弊がありました。 var strArray: は配列だと宣言したのではなくて、変数の宣言ですね。 ＃JavaScriptは、変数の宣言が、扱うデータの型によって変わらないので、 ＃これでどんな値でも入れられるので、混乱してしまうかもしれませんね。 そして、strArray=str.split(''); は、オブジェクト（配列）の参照を代入しています。 結果 textareaから取り出したstrが"xyz"なら strArray=str.split(''); で strArray[0] が"x*、strArray[1]が"y"、 ....となるというのや その後のstrArray[ id -0] += ～ は、配列の宣言ではなくて 既存のデータに追記しているという部分は 変わりません。 > 変数に解列を代入して、配列の宣言をするには下記と思っていたのですが違うのでしょうか？ > var varArray = strArray[]; ちょっとちがいますね。 var strArray = [ ]; か var strArray = new array(); ですね。
お礼
splitは str配列の中身のテキストを一文字ずつ分離して、しかもそれを配列に代入してくれる関数という事ですかね。 ＞＞＞ var strArray = [ ]; これは変数strArrayに配列を入れているのではないのですか？ ではもしこの配列を変数に入れたい場合はどうなるのでしょうか？
- superside0
- ベストアンサー率64% (463/719)
> 理想はテキストエリア内で、サブライムテキストのように、簡単にメールなどのひな形を編集できるようにすることです。 textarea内でテキストエディタのようなのリッチな操作を 利用ユーザーに提供したいというのが要望ということなのですね。なるほどです。 ただ、「クリック(Shift+Click)での改行」を実装することで それが解決されるのかが、ちょっとよく分からないです。 （特有エディタ操作の個人的な慣れだけのような気もするのですが、 クリック改行って一般的なんですかね） ちなみに、textareaでの編集機能を拡張したなら、 CK EditorとかAceといったJavaScriptもあるみたいなんで、 そういうものの利用やカスタマイズを検討しても、よいかもしれません。 （これはこれで かえって使い難いっていうユーザーがいるかもしれませんけど） CK Editor http://qiita.com/kenzooooo/items/ecdce2b12a72cb750a18 http://www.umbrellaprocess.com/archives/253 Ace http://qiita.com/naga3/items/1bc268243f2e8a6514e5
お礼
クリックで改行はあくまで一案でおっしゃる通り、サブライムのようにメールなどのテキスト情報を気軽に変換したり不要な部分を一括削除できればそれで十分です、閲覧者さんがテキストエリアにメールの分を張り付けて、サブライムのように編集できるなら教えていただいたもので十分だと思います。 これを自分のサイト上に、jqueryのプラグインのように読み込んでやればそれだけでテキストエリア内のテキストをあたかもサブライムのように変更できるのであればこれを実装するだけで良いかもしれません
- H240S18B73
- ベストアンサー率65% (190/288)
#2 前スレでの要望がそもそも 「textareaないのテキストで改行したいところをクリックすると、改行できるように」 ということだったのでよりシンプルにそのまんまのものを書きました ただ本当にそのままだとかなり誤操作しやすいので shift+クリックで、というようにはしました
- superside0
- ベストアンサー率64% (463/719)
横からですみません。 多分、No.2の、シンプルにっていうのは、 ユーザーの操作をもっとシンプルに出来るよ という意味かと。 （コードがシンプルになるっていうのもあるでしょうけど） つまり、もともと ご質問のあったHTML+JavaScriptでは １つ目のtextarea に記入 ↓ "表示"ボタン ↓ 記入した文字列が、div部に動的に表示されるので、ここで改行位置の文字をクリック ↓ 全て整ったら、”出力”ボタン ↓ ２つ目のtextareaに改行指定が反映された文字列で出力。 （コード変更で１つ目のtextareaに出力してしまってもよいでしょうし、その辺は応用で） というフローですが、 No.2で御提示されている方法だと、textarea内で記入中の文字列の 任意の場所で Shift+クリックすると、そこを直接改行してくれますので。 ＃確かに、このほうが操作も処理もシンプルですね。 ＃ただ、それだけの機能なら自分でtextarea内でリターンキーで改行すれば良いだけなので ＃そもそも、なぜクリックしての改行という機能が必要なのかの理由が気になります。 ＃たとえば、div内で 文字列が横幅を越えて文字列の途中で自動改行されたときの ＃禁則処理を実際に確認しながら、自身で改行位置を整えたいというのが目的なら、 ＃No.2で御提示された方法では、違ってくるかと。
お礼
ありがとうございます。理想はテキストエリア内で、サブライムテキストのように、簡単にメールなどのひな形を編集できるようにすることです。 >>>という部分を削除したりするのが大変ですよね？ ただテキストエリア内の特定の記号や文字をサブライムのように複数一括選択して削除するようなことは恐らく無理なのでしょうが。
- superside0
- ベストアンサー率64% (463/719)
> strArray[ id - 0 ]+='\r\n'; > これははいれつのせんげんですかね。 違います。 配列の宣言は、<script type="text/javascript">の先頭のグローバルで var strArray; として宣言されています。 （本サイトの投稿処理のせいかタブが消えてvarstrArray;になってしまっていますが） なお、この配列の中身はdisp()関数内で strArray=str.split(''); で作られています。 これでtextareaが "xyz"だったなら strArray[0] が "x" strArray[1] が "y" strArray[2] が "z" となります。 そして、ご質問の strArray[ id - 0 ]+='\r\n'; の部分は、 ここの演算子が = だと strArray配列のid番目への代入ですが 演算子が、 += なので、 もともとの値への追記（数値なら加算）になります。 なので、ここは、 strArray[ id - 0 ] への"\r\n"の追記なので、もしid値が"0"だったら、 strArray[ 0 ] に元々入っていた "x"が "x\r\n" となります。 > aタグのidとどこで指定してるのでしょうか？ No.1で説明した通りです。 オリジナルのHTMLにはないですがDOMを使って たとえば、textareaの文字列が "xyz"だったら、disp()関数で <a id=0 onclick="addCR(this)">x</a> <a id=1 onclick="addCR(this)">y</a> <a id=2 onclick="addCR(this)">z</a> に相当するものが、動的に作られています。 このthisを、function addCR(obj) として、objという名前で受けとっているので addCR()関数内の obj.id は、上の動的に作ったaタグ内のid値となります。 これで、 "x"をクリックしたときのobj.idは0で、"y"をクリックしたときのobj.idは1となり つまり、 id=obj.idした後のidは、 クリックした文字が 文字列の何番目かを示すことになります。 > varを省略したid変数を宣言していますが、なぜ省略していると思いますか？ いきなり、 id = obj.idとしていて、どこでも宣言されていないidという変数を 使っているけどおかしくないか？ってことですね。 確かにそうですね。今回のケースだと、この idは無宣言でも問題ないですが、 仮に同じ名前のグローバル変数があったときは、ここで値を上書きしてしまって 不具合がでる可能性がありますね。 なので、綺麗に書くならここは、 var id = obj.id; のほうがよいでしょうね。 （というか idを使わないでも obj.idで もよいのかも）
お礼
＞＞＞ 違います。 配列の宣言は、<script type="text/javascript">の先頭のグローバルで var strArray; として宣言されています。 （本サイトの投稿処理のせいかタブが消えてvarstrArray;になってしまっていますが） これは配列の宣言だったのですか？ 空の配列宣言は下記で strArray[]; 変数に解列を代入して、配列の宣言をするには下記と思っていたのですが違うのでしょうか？ var varArray = strArray[]; 記載の方法だと、変数の空宣言との区別がつかないと思うのですが、
- H240S18B73
- ベストアンサー率65% (190/288)
シンプルに <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> jQuery(function($){ $('textarea').on('click',function(e){ if(!e.shiftKey)return; var n=this.selectionStart; var txt=this.value; this.value=txt.substr(0,n)+"\n"+txt.substr(n); }); }); </script> ただのクリックだと意図せずが多発するので Shift押しながらのクリックのみに反応
お礼
ありがとうございます。読みにくいこーどですからね
お礼
>>> strArray[ id - 0 ]+='\r\n'; これははいれつのせんげんですかね。 変数と違ってvarがいらないのですね。 ＞＞ addCR内の id=obj.id; は上のaタグのidプロパティの値を idという変数に代入しているだけです。 aタグのidとどこで指定してるのでしょうか？ objというのが初めからあるオブジェクトなのではなくこの人が作ったaタグのオブジェクトという事でしょうか？ .idはidが入っているプロパティという事ですね。 varを省略したid変数を宣言していますが、なぜ省略していると思いますか？ 悪いコードなだけでしょうか？