偽物のtextareaの文字をリアルタイムで本物のtextareaにコピー

偽物のtextarea

本物にコピー エンコード有り エンコード無し ソース表示 消去 再読込 テキスト化

本物のtextarea

偽物に返す エンコード有り エンコード無し 消去 ウェブ表示 改行なし 改行付加 巨大textarea

ソース

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript"><!--
function copyData(){
  myTEXT1 = $('#tarea').html();
 if(encode.value!="raw"){
  myTEXT1 = myTEXT1.replace(/\r\n|\n|\r|<p>/g,"");
  myTEXT1 = myTEXT1.replace(/<br.*?>/g,"\r\n");
  myTEXT1 = myTEXT1.replace(/<\/p>/g,"\r\n");
  if(encode.value=="no"){
   myTEXT1 = $("#mess").html(myTEXT1).text();
  }
 }
 mess.value = myTEXT1;
}
function backData(){
 myTEXT0 = mess.value;
 if(encodeback.value=="yes"){
  myTEXT0 = myTEXT0.replace(/&/g,"&").replace(/ | /g,"&nbsp;").replace(/(<)/g,"&lt;").replace(/(>)/g,"&gt;");
 }
 myTEXT0 = myTEXT0.replace(/\r\n|\n|\r/g,"<br>"+"\r\n");
 tarea.innerHTML = myTEXT0;
}
function clearData(x){
 x.value = "";
 x.innerHTML = "";
}
function toTEXT(){
 myTEXT1 = $('#tarea').html();
  myTEXT1 = myTEXT1.replace(/\r\n|\n|\r/g,"");
  myTEXT1 = myTEXT1.replace(/<br.*?>/g,"\r\n");
  myTEXT1 = myTEXT1.replace(/<\/p>|<\/div>|<\/li>|<\/dt>|<\/dd>|<\/h.>/g,"\r\n");
 myTEXT1 = myTEXT1.replace(/<!--[\s\S]*-->/g,"").replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,"");
 myTEXT1 = myTEXT1.replace(/\r\n|\n|\r/g,"<br>"+"\r\n");
 tarea.innerHTML = myTEXT1;
}
function outData(x,y){
 if(y.value!=""){
  myTEXT = x.value;
  if(y.value=="yes"){
   myTEXT = myTEXT.replace(/\r\n|\n|\r/g,"<br />"+"\r\n");
  }
  subWin = window.open("about:blank","form_data");
  subWin.document.open();
  if(y.value=="text"){
   myTEXT = "<textarea style='width:98%;height:98%'>"+myTEXT+"<\/textarea>"
  }
  subWin.document.write(myTEXT);
  subWin.document.close();
 }
}
var _timeout;
function _focus_tarea(x) {
 copyData();
 _timeout = setTimeout(_focus_tarea, 100);
}
function _focus_mess() {
 backData();
 _timeout = setTimeout(_focus_mess, 100);
}
function _blur() {
 clearTimeout(_timeout);
}
// --></script>
<div>偽物のtextarea</div>
<div id="tarea" contenteditable="true" onfocus="_focus_tarea();" onblur="_blur();" style="border:1px inset #ccc;background-color:white;width:500px;height:200px;overflow:auto;font-family:monospace;padding:2px;">
</div>
<div>
<button onClick="copyData();" tabindex="2" accesskey="b">本物にコピー</button>
<select id="encode" tabindex="1">
<option value="yes" selected>エンコード有り</option>
<option value="no">エンコード無し</option>
<option value="raw">ソース表示</option>
</select>
<button onClick="clearData(tarea);" tabindex="7" accesskey="x">消去</button>
<button onClick="location.reload(true);" tabindex="8" accesskey="r">再読込</button>
<button onClick="toTEXT();" tabindex="9" accesskey="r">テキスト化</button>
</div>
<div>本物のtextarea</div>
<textarea id="mess" onfocus="_focus_mess();" onblur="_blur();" style="width:500px;height:200px;" tabindex="3" accesskey="i">
ここに偽物のtextareaの内容がコピーされます。
</textarea>
<div style="width:500px;">
<button onClick="backData();" tabindex="5" accesskey="c">偽物に返す</button>
<select id="encodeback" tabindex="4">
<option value="yes" selected>エンコード有り</option>
<option value="no">エンコード無し</option>
</select>
<button onClick="clearData(mess);" tabindex="6" accesskey="d">消去</button>
<select id="view" tabindex="10" onChange="outData(mess,view);">
<option value="" selected>ウェブ表示</option>
<option value="no">改行なし</option>
<option value="yes">改行付加</option>
<option value="text">巨大textarea</option>
</select>
</div>