便利３ ■実用■　置換用の簡単エディタ

　Ａ■テキスト作成。置換前の文（メモ帳等からコピーして貼り付けても、この画面に直接記述しても可）

　Ｂ■置換指定（この画面から自由に記述や削除して変更できます。常時使用する分はソースに直接記述、削除しても可）

　Ｃ■HTMLのソース表示

→このボタンをクリックした後、エリアの中でマウスの右クリックでコピー。

　Ｄ■ブラウザ画面の表示

ローカルで使用できる、簡単なテキスト・エディタのような JavaScript です。
一つの画面で、テキスト作成または貼り付け（Ａ）、置換設定をして実行をクリック（Ｂ）すると、テキスト・エディタのようにHTMLのタグ付きソースを表示（Ｃ）し、ブラウザでの画面表示（Ｄ）もします。思い通りの表示ができたら、Ｃのソースをコピーして下さい。
なお、Ａの画面のテキストは見本なので、「全ソース」の中には記述してありません。

しかしＢの置換設定はしてあります。
改行タグは、テキストが改行さえしてあれば、その位置に自動で付きます。
太字置換は、テキストでは　「ｓｓ文字ｔｔ」と記述すれば「文字」が太字になります。
ルビ（振り仮名）置換は、テキストで、「ｘｘ漢字ｙｙかんじｚｚ」と記述すれば、ルビが付きます。
テキストに「●●」と記述すれば、「JavaScript」という文字に置換します。

画面上で置換指定部分を全部削除して、自分の使いやすい置換にすることもできます。
いちいち削除や指定が面倒なら、不要な置換指定をソース自体から削除して、自分用の置換指定をソースに記述して下さい。

原本はガチムチの杜の「テキストをHTMLに変換する方式」から。
直接、置換した後のHTMLのタグ付きのソースが表示（Ｃ）されるので、そのＣエリアをコピーすることができます。
Ｃエリアをコピーする方法は、ysklogの「textarea（テキストエリア）以外を『すべて選択』にする方法」から。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>便利３ ■実用■　置換用の簡単エディタ</title>

<!--★ここからコピー-->
<style type="text/css">
<!--
#Twaku{margin-left:20px;}/*★全体の位置指定*/
#Txt,#Scr,#Sosu,#Out{width:90%; height:150px;overflow: scroll;}/*★4個のエリアの共通指定*/
#Scr{height: 200px;}/*★Aエリアの縦幅*/

#Sosu{border:solid 2px #00f;}/*★Cエリアの枠線　青*/
#Out{border:solid 2px #f00;}/*★Dエリアの枠線　赤*/

h5{width:90%; font-size:15px; margin-bottom:0px; background:#fcf;}/*★4個のエリアの見出しの共通指定*/
.Lk{background:#cff;}/*★CエリアとDエリアの見出しの背景色　水色*/
-->
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

<!--★ここからコピー-->
<div id="Twaku">
<h4>置換用の簡単エディタ</h4>


<h5>　Ａ■テキスト作成。置換前の文（メモ帳等からコピーして貼り付けても、この画面に直接記述しても可）</h5>
<textarea id="Txt">

</textarea><br>
<br>


<h5>　Ｂ■置換指定（この画面から自由に記述や削除して変更できます。常時使用する分はソースに直接記述、削除しても可）</h5>
<textarea id="Scr">
var text=document.getElementById("Txt").value;
var e=document.getElementById("Out"); e.innerHTML=ht_str(text);
var sosu=document.getElementById("Sosu"); Sosu.innerHTML=ht_str(ht_str(text));
function ht_str(str){
if(str==null) return ""; str=str.toString(); str=str.replace(/&lt;/g,"&amp;lt;").replace(/&gt;/g,"&amp;gt;");

/*★↓ここから自由に置換設定。見本は削除しても変更しても可*/
str=str.replace(/\n/g,"<br>\n");//★改行タグの見本
str=str.replace(/ｓｓ/g,"<strong>").replace(/ｔｔ/g,"</strong>"); //★太字の見本
str=str.replace(/ｘｘ/g,"<ruby><rb>").replace(/ｙｙ/g,"</rb><rp>(</rp><rt>").replace(/ｚｚ/g,"</rt><rp>)</rp></ruby>");//★ルビ(振り仮名)の見本
str=str.replace( /●●/g,"javascript"); //★文字の置換の見本



/*★↑ここまで自由に置換設定*/
return str;
}
</textarea><br>
<button onclick="Ar();">実行</button><button onclick="location.reload(true)">消去</button>

<div id="Err"></div><!--★エラー表示位置-->

<h5 class="Lk">　Ｃ■HTMLのソース表示</h5>
<div id="Sosu"></div>
<button onclick="text_select()">すべて選択</button>→このボタンをクリックした後、エリアの中でマウスの右クリックでコピー。

<h5 class="Lk">　Ｄ■ブラウザ画面の表示</h5>
<div id="Out"></div>

</div>


<!--★ここから説明書き。不要なら削除=========================================-->
<div style="margin:30px 10%;">
<hr>
ローカルで使用できる、簡単なテキスト・エディタのような JavaScript です。<br>
一つの画面で、テキスト作成または貼り付け（Ａ）、置換設定をして実行をクリック（Ｂ）すると、テキスト・エディタのようにHTMLのタグ付きソースを表示（Ｃ）し、ブラウザでの画面表示（Ｄ）もします。思い通りの表示ができたら、Ｃのソースをコピーして下さい。<br>
なお、<span style="color:red;">Ａの画面のテキストは見本なので、「全ソース」の中には記述してありません。</span><br>
<br>
しかしＢの置換設定はしてあります。<br>
改行タグは、テキストが改行さえしてあれば、その位置に自動で付きます。<br>
太字置換は、テキストでは　「ｓｓ文字ｔｔ」と記述すれば「文字」が太字になります。<br>
ルビ（振り仮名）置換は、テキストで、「ｘｘ漢字ｙｙかんじｚｚ」と記述すれば、ルビが付きます。<br>
テキストに「●●」と記述すれば、「JavaScript」という文字に置換します。<br>
<br>
画面上で置換指定部分を全部削除して、自分の使いやすい置換にすることもできます。<br>
いちいち削除や指定が面倒なら、不要な置換指定をソース自体から削除して、自分用の置換指定をソースに記述して下さい。</p>
<hr>
</div>
<!--★ここまで説明書き。不要なら削除=============================================-->


<script type="text/JavaScript">
<!--
/*=============================================================
テキストをHTMLに変換する方式　By　http://blog.livedoor.jp/saitama_hinu_bank/archives/50643628.html
テキストエリア以外を選択指定　By　http://ysklog.net/javascript/2137.html
★テキスト・エディタっぽく改造　2015/03/15
=============================================================*/
function Ar(){
		var e_scr=document.getElementById("Scr");
		var e_err=document.getElementById("Err");
		if(e_err) e_err.innerHTML ="";
		try{ e_scr && eval(e_scr.value); }
		catch(err){ e_err.innerHTML="<strong>"+ err.name +"</strong>"+ err.message;}
}
function text_select() {
　　　　　　　　var element = document.getElementById("Sosu");//要素の取得
　　　　　　　　var range = document.createRange();//rangeオブジェクトの作成
　　　　　　　　range.selectNodeContents(element);//取得した要素の内側を範囲とする
　　　　　　　　window.getSelection().addRange(range);//範囲を選択状態にする
}
window.onload=Ar;
//-->
</script>
<!--★ここまでコピー-->

<br><br><br>
</body>
</html>

便利３ ■実用■ 置換用の簡単エディタ UP日時 : 2015/03/15

Ａ■テキスト作成。置換前の文（メモ帳等からコピーして貼り付けても、この画面に直接記述しても可）

Ｂ■置換指定（この画面から自由に記述や削除して変更できます。常時使用する分はソースに直接記述、削除しても可）

Ｃ■HTMLのソース表示

Ｄ■ブラウザ画面の表示

　便利３ ■実用■　置換用の簡単エディタ　　　　UP日時 : 2015/03/15

　Ａ■テキスト作成。置換前の文（メモ帳等からコピーして貼り付けても、この画面に直接記述しても可）

　Ｂ■置換指定（この画面から自由に記述や削除して変更できます。常時使用する分はソースに直接記述、削除しても可）

　Ｃ■HTMLのソース表示

　Ｄ■ブラウザ画面の表示