■その1 (教えていただく前の版)
(ぜんぜんわからないので、有識者に、教えてもらおう、という気持ちで記事書いてます)
Javascriptのreplaceで、置換後の文字列を動的に変えたい
やりたいことは、html+javascriptで、正規表現を使った、「置換」ができるような、一種のテキストエディタを作りたいということです。
この画面でいうと、「改行¥n」を、「タブ¥t」に変換する、というだけのことをやってます。
1つ目のテキストボックスに、置換「対象」の文字列として、正規表現を許容する文字列を入力し、
2つ目のテキストボックスに、置換「後」の文字列として、正規表現を許容する文字列を入力し、
「置換」ボタンを押すと、置換されると。
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」
とすると、そのまま、「あ¥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");
とあるのは、かなり無理矢理(苦肉の策)で、
改行文字「¥n」と、タブ文字「¥t」だけ、それと認識できるように、変換してます。
この「replace(A,B)」のBの部分、どうすればよいか
もしおわかりの方、いらっしゃったら、ご教示いただければありがたいです。
※このソースはこのソースで、タブと改行に限って言えば、使えるものにはなっています。
■その2 (教えていただいた、後の版)
r_t = JSON.parse( "\"" + document.getElementById('rp_to').value + "\"");
私自身が知りたいのは
「replace(A,B)で、Bの方に、正規表現を含む、文字列を動的に入れる方法」
というより
「replace(A,B)で、Bの方で、HTML側から渡された文字列を、エスケープ文字含め、適切に処理したい」 ということなんだろうな、と思うに至りました。(で、JSON.parseは、その文字処理が適切にできると)
非常に勉強になりました。ありがとうございます。
以下、変更後ソース
<!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: "MS ゴシック",sans-serif;
}
textarea {
width: 800px;
height: 150px;
border: 2px solid #ffcc77;
font-family: "MS ゴシック",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>