Javascriptのreplaceで、置換後の文字列を動的に変えたい

■その１　（教えていただく前の版）

（ぜんぜんわからないので、有識者に、教えてもらおう、という気持ちで記事書いてます）
Javascriptのreplaceで、置換後の文字列を動的に変えたい

https://github.com/santarou6/tikan/blob/master/tikan_v1.html

<img width="523" alt="ss1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107418/f8501040-92cb-e481-60d2-a383e76867f1.png">

やりたいことは、html+javascriptで、正規表現を使った、「置換」ができるような、一種のテキストエディタを作りたいということです。

この画面でいうと、「改行￥ｎ」を、「タブ￥ｔ」に変換する、というだけのことをやってます。

１つ目のテキストボックスに、置換「対象」の文字列として、正規表現を許容する文字列を入力し、
２つ目のテキストボックスに、置換「後」の文字列として、正規表現を許容する文字列を入力し、

「置換」ボタンを押すと、置換されると。

```
	r_f = document.getElementById('rp_frm').value;
	r_t = document.getElementById('rp_to').value;

	tx = tx.replace(new RegExp(r_f,"g"), r_t ); 
```

で、置換対象の文字列を動的に変えるのは、
replace(A,B)で、AにRegExp(hogehoge,"g")と入れればよいのはわかりました。

が、Bの方に、正規表現を含む、文字列を動的に入れる方法が、わかりません。。

「あいう」を「あ
う」や、
「あいう」を「あ→う」にしようとして、
.変換前「い」　→　変換後「\n」
.変換前「い」　→　変換後「\t」
とすると、そのまま、「あ￥ｎう」「あ￥ｔう」という文字に置き換わってしまいます

当然ソースに
　.replace(“い”,”¥n”)
とすれば改行されます。

　変数2=‘¥n‘
　.replace(変数1,変数2)
も改行されます

が、、
　変数2=画面上で入力した変換後文字列(例:¥n)
　.replace(変数1,変数2)

としても、改行されず、「¥n」になってしまうと、、
　

↑ここが、わからないところです。。


ちなみに、

```
	r_t = r_t.replace("\\" + "n","\u000d\u000a");
	r_t = r_t.replace("\\" + "t","\u0009");
```

とあるのは、かなり無理矢理（苦肉の策）で、
改行文字「￥ｎ」と、タブ文字「￥t」だけ、それと認識できるように、変換してます。


この「replace(A,B)」のBの部分、どうすればよいか
もしおわかりの方、いらっしゃったら、ご教示いただければありがたいです。

※このソースはこのソースで、タブと改行に限って言えば、使えるものにはなっています。


■その２　（教えていただいた、後の版）

```
r_t = JSON.parse( "\"" + document.getElementById('rp_to').value + "\"");
```

私自身が知りたいのは
「replace(A,B)で、Bの方に、正規表現を含む、文字列を動的に入れる方法」
というより
「replace(A,B)で、Bの方で、HTML側から渡された文字列を、エスケープ文字含め、適切に処理したい」　ということなんだろうな、と思うに至りました。（で、JSON.parseは、その文字処理が適切にできると）

https://github.com/santarou6/tikan/blob/master/tikan_v2.html

非常に勉強になりました。ありがとうございます。


以下、変更後ソース

```HTML:tikan.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>置換</title>
<style type="text/css">
	body {
	    background-color: #eeeeee; 
	    color: #000000; 
	    margin: 2; 
	    padding: 2;
	    font-family: "ＭＳ ゴシック",sans-serif;
	}
	textarea {
	    width: 800px;
	    height: 150px;
	    border: 2px solid #ffcc77;
	    font-family: "ＭＳ ゴシック",sans-serif;
	}

</style>
<script type="text/javascript">

function tikan(){
	tx = document.getElementById('ss1').value;
	var r_f;
	var r_t;
	r_f = document.getElementById('rp_frm').value;
	//r_t = document.getElementById('rp_to').value;
	r_t = JSON.parse( "\"" + document.getElementById('rp_to').value + "\"");

	//r_t = r_t.replace("\\" + "n","\u000d\u000a");
	//r_t = r_t.replace("\\" + "t","\u0009");

	tx = tx.replace(new RegExp(r_f,"g"), r_t ); 
	document.getElementById('ss2').value = tx;	
}

function tereko(){
	
	var p1;
	var p2;
	p1 = document.getElementById('rp_frm').value;
	p2 = document.getElementById('rp_to').value;
	document.getElementById('rp_frm').value = p2;
	document.getElementById('rp_to').value = p1;
}

</script>
</head>

<body >
<form name="test">
	<input type="text" id="rp_frm" value="\n">
	<input type="button" value="⇔" onClick="tereko()">
	<br/>
	<input type="text" id="rp_to" value="\t"><br/>
	<br/><br/><input type="button" value="置換" onClick="tikan()">
</form>

<br/>
<textarea id="ss1" >
あいうえお
かきくけこ
さしすせそ
</textarea><br/>

<textarea id="ss2">
</textarea><br/>

</body>
</html>


```