textareaの現在の行インデックスを取得する

教えてgoo

http://oshiete.goo.ne.jp/qa/6845292.html

要素.selectionStart で文字（キャレット）位置がわかるも、どうしよう？
その前の行のインデント分の空白の取得？

テキストエリアでオートインデント。しかしキャレットが移動するのが見えて、ちょっぴり残念。（いやっ！それは仕様です）

<!DOCTYPE html>
<title></title>
<style>

</style>

<form action="#" id="FORM-1">
  <p>
    <textarea rows="10" cols="80" name="hoge"></textarea>
  </p>
  <p>
    <textarea rows="10" cols="80" name="huga"></textarea>
  </p>
</form>

<script>


(function () {
  var stock = [];
  
  function Indent (textarea) {
    this.node = textarea;
  }
  
  //イベント設定
  function demo () {
    this.node.addEventListener ('keyup', this, false);
  }
  
  
  //イベントハンドラー
  function handler (event) {
    if (13 === event.which)
      add.call (this);
  }
  
  
  //インデント分の空白を挿入
  function add () {
    var start = this.node.selectionStart;

    if (isNaN (start))
      return;
    
    var value = this.node.value;
    var NotLF = /\r\n|\r/g;
    var region_byCaret = value.slice (0, start);
    var CRLFs = region_byCaret.match (NotLF);

    if (CRLFs) {
      region_byCaret = region_byCaret.replace (NotLF, '\n');
      start -= CRLFs.length;
    }
    
    var region = region_byCaret;
    var lines = region.split ('\n');
    var n = lines.length - 1;
    var spc;
    
    if (0 === lines[n].length) {
      if ((spc = lines[n-1].match (/^([\s\u3000]+)/))) {
        this.node.value = region_byCaret + spc[1] + value.slice (start);
        this.node.selectionStart = this.node.selectionEnd = start + spc[1].length;
      }
    }
  }


  function create (textarea) {
    if ('TEXTAREA' !== textarea.nodeName)
      return null;
    
    var obj = new Indent (textarea);
    var stock_no = stock.indexOf (textarea);
    
    if (-1 === stock_no)
      stock_no = stock.length;

    stock[stock_no] = textarea;
    obj.demo ();
    
    return obj;
  }
  
  
  //______________
  Indent.prototype.handleEvent = handler;
  Indent.prototype.demo = demo;
  Indent.create = create;

  this.AutoIndent = Indent;

})();

AutoIndent.create (document.querySelector ('textarea[name="hoge"]'));
AutoIndent.create (document.querySelector ('textarea[name="huga"]'));

</script>

テキストを正弦波でインデント！（思いつきで書くもんじゃないな）

<!DOCTYPE html>
<title></title>
<form>
  <p>
    <textarea rows="30" cols="80" name="hoge">
    
    </textarea>
  </p>
  <p>
    <input type="button" value="test" onclick="test()">
  </p>
</form>

<script type="text/javascript">
//text, 行数の振幅, 桁数の振幅, １行の最大文字数
function sinWaveText (text, cycle, amplitude, colLength) {
  if (! text)
    return '';
  if (! cycle)
    cycle = cycle || 10;
  if (! amplitude)
    amplitude = 10;
  if (! colLength)
    colLength = 25;
  
  amplitude /= 2;
  
  var result = [];
  var spc = '\u3000';
  var deg = Math.PI / cycle;
  
  var lines = text.split (/\r\n|\r|\n/g);
  var idx = 0;
  var i, I;
  var reg;
  var tx;
  var t;
  var s;
  
  for (i = 0, I = lines.length; i < I; i++) {
    tx = lines[i].replace (/^[\s\u3000]*/, '');
    reg = new RegExp ('(.{1,' + colLength + '})', 'g');
    while (t = reg.exec (tx)) {
      s = (Math.sin (result.length * deg) * amplitude + amplitude) | 0;
      result.push ((new Array (s)).join(spc) + t[0]);
    }
  }
  
  return result.join ('\n');
}

function test () {
  var e = document.querySelector ('textarea');
  e.value = sinWaveText (e.value);
}
</script>