getQuery () を思考中。￥ｕ〜 をどうあつかってよいものかわからず。

JavaScript

array::map は、本来ならコールバックで配列を渡し、操作する（配列を受け取る）のだろうけれど、あたかもグローバル変数のようにして result を弄った。
副産物の getObjectTree () が、他でも使えそうだ。
追記。map じゃなくて forEach だろ。＞俺

<!DOCTYPE html>
<title></title>
<style type="text/css">
#PARENT-FORM {
  width :820px;
}
#LEFT-FORM {
  float : left;
  width : 400px;
}
#RRIGHT-FORMRTXAR, #RTXAR {
  width : 400px;
}

</style>

<h3>これはテスト用です</h3>
<div id="PARENT-FORM">
<form action="#" id="LEFT-FORM" method="get">
  <fieldset>
    <legend>テキストボックス</legend>
    1.<input type="text" name="text1" value="テキスト１">
    2.<input type="text" name="text1" value="テキスト２">
  </fieldset>

  <fieldset>
    <legend>チェックボックス</legend>
    <p>
      1-1.<input type="checkbox" name="chk1" value="チェック１−１" checked>
      1-2.<input type="checkbox" name="chk1" value="チェック１−２" checked>
    <p>
      2-1.<input type="checkbox" name="chk2" value="チェック２−１">
      2-2.<input type="checkbox" name="chk2" value="チェック２−２">
  </fieldset>

  <fieldset>
    <legend>ラジオボタン</legend>
    <p>
      1.<input type="radio" name="radio1" value="ラジオボタン１−１" checked>
      2.<input type="radio" name="radio1" value="ラジオボタン１−２">
    <p>
      1.<input type="radio" name="radio2" value="ラジオボタン２−１">
      2.<input type="radio" name="radio2" value="ラジオボタン２−２" checked>
  </fieldset>

  <fieldset>
    <legend>セレクト</legend>
    <p>
      1.<select name="select1">
        <option value="select1_value1">サンプル1</option>
        <option value="select1_value2" selected>サンプル2</option>
        <option value="select1_value3">サンプル3</option>
      </select>
    <p>
      2.複数選択可<br>
      <select name="select2" multiple>
        <option value="select2_value1" selected>サンプル1</option>
        <option value="select2_value2">サンプル2</option>
        <option value="select2_value3" selected>サンプル3</option>
      </select>
  </fieldset>
  
  <p>
    <textarea name="txarea1">適当に変えてください</textarea>
  </p>

  <input type="submit" >
  </form>
  
  <form action="#" id="RIGHT-FORM">
    <textarea id="RTXAR" rows="30">
    ここにフォームの内容が…
    </textarea>
  </form>
</div>

<script type="application/javascript; version=1.6">

var locationSplit = function (url) {
  return  /^(([^:/?#]+):)?(\/\/([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/.exec(url);
};

//___

var getQuery = function (querys) {
  if (! querys)
    return;
      
  var result = { }; // map から弄られる
  var reg_name_check = /^[^a-z]|[^a-z0-9\-\.\:\_]/i;
  // map::function デコード
  var toDecode = function (s) {
    return decodeURIComponent (s);
  };
  
  // map::function 配列値を変数名とし、最終値を変数値とするように置き換える
  //  a=b=c -> [a,b,c] -> a=c, b=c;
  var toSubstituting = function (target, count, all) {
    var max = all.length - 1;
    var val = all[max];

    check : {
      if ('' == target)
        return;
      if (max == count)
        return;
      if (reg_name_check.test (target)) { //@name のチェック(頭だけ)
        throw new Error;
      }
    }
    
    entry: {
      switch (typeof result[target]) {
      case 'object' :
        result[target].push (val); //配列に追加
        break;

      case 'undefined' :
        result[target] = val; // 普通に登録
        break;

      default :
        result[target] = [result[target], val]; //配列にして再登録
      }
    }
  };

  var toValue = function (query) {
    query.split (/=/g)
         .map (toDecode) // "=" で分離してデコード
         .map (toSubstituting); // 最後を値とし、前を変数とみなし代入
  };

  querys.replace (/\+/g, ' ')
        .split (/;|&/g) //+を空白にして区切る
        .map (toValue);

  return result;
};


//___
// オブジェクトをツリー表示にする
function getObjectTree (obj, padding/*空白文字*/, addStr/*付加文字*/) {
  var result = [ ];

  if (! padding)
    padding = '';
  
  if (! addStr)
    addStr = '';
  
  (function (ary, index, spc) {
    var key, val;

    for (key in ary) {
      if (ary.hasOwnProperty (key)) {
        val = ary[key];
        if ('object' == typeof val) {
          result.push (spc + addStr + '"' + key +'"');
          arguments.callee (val, key, spc + padding);
        }
        else
          result.push (spc + addStr + '"' + key + '" = "'+ ary[key] +'"');
      }
    }
  })(obj, 1, '');

  return result;
}
//___

document.getElementById('RTXAR').value = getObjectTree (getQuery (locationSplit (location.href)[7]),'│','├').join("\n");

/*
var es = document.getElementById('LEFT-FORM').elements;
Array.forEach ( es, function (e,c) {
  alert("No."+c+":"+e.nodeName);
});
*/
</script>