2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-07-29

■その1 (教えていただく前の版)

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

ss1.png

やりたいことは、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は、その文字処理が適切にできると)

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

以下、変更後ソース

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: "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>


2
1
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?