文字列の一括置換(元の文章を残すバージョン)

元の文章を残すために1つ関数を増やしている。
元の文章を残すのは意外に面倒。
1つ前のサンプルとの違いに注意。
実行結果

元の文章

置換する文字

置換後の文字

置換後の文章


ヘッダ部分
<SCRIPT LANGUAGE="JavaScript">
//以下の5つの汎用関数はJavaScriptハンドブックより抜粋

//mainStrからsearchStrまでの文字を抜き出す関数
function getFront(mainStr,searchStr)	{
	var offset = mainStr.indexOf(searchStr)
	if(offset == -1)	{
		return null
	}
	return mainStr.substring(0,offset)
}

//mainStrからsearchStrより後ろの文字を抜き出す関数
function getEnd(mainStr,searchStr)	{
	var offset = mainStr.indexOf(searchStr)
	if(offset == -1)	{
		return null
	}
	return mainStr.substring(offset+searchStr.length,mainStr.length)
}

//searchStrの直後にinsertStrを挿入する関数。先のgetFront()、getEnd()関数を使う。
function insertString(mainStr,searchStr,insertStr)	{
	var front = getFront(mainStr,searchStr)
	var end = getEnd(mainStr,searchStr)
	if(front != null && end != null)	{
		return front + insertStr + searchStr + end
	}
	return null
}

//mainStrからdeleteStrを削除する関数。先のgetFront()、getEnd()関数、後のreplaceStr()関数を使う。
function deleteString(mainStr,deleteStr)	{
	return replaceString(mainStr,deleteStr,"")
}

//mainStrのsearchStrをreplaceStrに置き換える。先のgetFront()、getEnd()関数を使う。
function replaceString(mainStr,searchStr,replaceStr)	{
	var front = getFront(mainStr,searchStr)
	var end = getEnd(mainStr,searchStr)
	if(front != null && end != null)	{
		return front + replaceStr + end
	}
	return null
}

//元の文章を残しておくために用意した関数(オリジナル)
function onlyInsert()	{
document.form1.posttext.value = document.form1.pretext.value
stringLoopReplace()
}

//最初のフォームの文字を一括置換する関数(オリジナル)
function stringLoopReplace()	{
var str1 = document.form1.posttext.value
var str2 = document.form1.targettext.value
var str3 = document.form1.replacetext.value
if(str1.indexOf(str2) != -1)	{
	document.form1.posttext.value = replaceString(str1,str2,str3)
	stringLoopReplace()
}
}
</SCRIPT>

ボディ部分 <FORM NAME="form1"> 元の文章<BR> <INPUT TYPE="text" NAME="pretext" SIZE=50 VALUE="JavaScriptとJavaとJavaTeaは関係ありません。"><P> 置換する文字<BR> <INPUT TYPE="text" NAME="targettext" SIZE=10 VALUE="Java"><P> 置換後の文字<BR> <INPUT TYPE="text" NAME="replacetext" SIZE=10 VALUE="ジャバ"><P> <INPUT TYPE="button" NAME="REPLACE" VALUE="置換" onClick="if(document.form1.targettext.value!=''){onlyInsert()}"><P> 置換後の文章<BR> <INPUT TYPE="text" NAME="posttext" SIZE=50> </FORM>