// preタグ内の 「<」 と 「>」 を &lt; と &gt; に置換 および 元に戻す（逆に置換する）
// そのままではpre内のタグはhtmlタグとして認識されるので、実体参照 &lt; &gt; に置き換える必要がある。
function escapeTag(textAreaId){
	var ta = document.getElementById(textAreaId);
	var s = ta.value;
	var strA = "";
	var strB = "";
	var strPre;
	var n = 0;
	var i = 0;
	var nType = 0;	// 0:実体参照に変換  1:実体参照から元に戻す
	// 第二引数があれば nType を引数から取得 // 第二引数を1にして呼び出せば「元に戻す」ことに
	if (arguments.length > 1) nType = arguments[1];
	while(true){
		n = s.indexOf("<pre>", n);
		if (n != -1) {
			i = s.indexOf("</pre>", n + 5);		// 5 ... <pre> の文字数
			if (i != -1) {
				strA = s.substring(0, n + 5);	// 5 ... <pre> の文字数
				strPre = s.substring(n + 5, i);	// 5 ... <pre> の文字数
				strB = s.substring(i);
				
				if (nType == 0) strPre = exchgLtGt(strPre);	// 置換
				else strPre = rvsLtGt(strPre);			// 置換（逆）
				
				s = strA + strPre + strB;
				n = (strA + strPre).length + 6;	// 6 ... </pre> の文字数
				continue;
			}
		}
		break;
	}
	ta.value = s;
};

function exchgLtGt(s){
	s = s.replace(/</igm,"&lt;");	// 正規表現で < を置換
	s = s.replace(/>/igm,"&gt;");	// 正規表現で > を置換
	return s;
};

function rvsLtGt(s){
	s = s.replace(/\&lt;/igm,"<");	// 正規表現で &lt; を置換
	s = s.replace(/\&gt;/igm,">");	// 正規表現で &gt; を置換
	return s;
};

<form>
	<textarea rows="25" cols="50" id="ta"></textarea>
</form>
<input type="button" onclick="escapeTag('ta')" value="実体参照に置換" />
<input type="button" onclick="escapeTag('ta',1)" value="もとに戻す" />