テキストエリアに入力された文字列を、任意の場所に挿入したい

前提

テキストエリアに入力した文字列を、別のテキストエリアに出力したいです。

実現したい動作

「ソース」テキストエリアに入力→「送信」ボタン押下→「ソース」を「変換後」テキストエリアに出力→「コピーする」ボタン押下→コピー完了

「ソース」は「変換後」のreplPointにreplace()で置き換えています。

発生している問題

「ソース」テキストエリアに入力された文字列は取得できているのですが、「変換後」テキストエリアに出力ができない状態です。

該当のソースコード

javascript
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8" />
6  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8  <title>pset</title>
9
10  <style></style>
11</head>
12
13<body>
14  <form method="post" action="">
15    <div>
16      <label for="etc">ソース</label><br>
17      <textarea id="etc" name="etc" rows="30" cols="100"></textarea>
18    </div>
19    <input type="submit" name="btn_submit" value="送信" />
20    <input type="hidden" name="form_session" value="ta9galkjlsGJ==" />
21  </form>
22  <br>
23  <label for="etc">変換後</label><br>
24  <textarea id="story" name="story" rows="30" cols="100">
25aaa
26replPoint
27    </textarea>
28
29
30  <br />
31  <button onclick="copy()">コピーする</button>
32  <script>
33    function copy() {
34      var text = document.getElementsByTagName("textarea")[1];
35
36      text.select();
37      document.execCommand("copy");
38    }
39
40    let input_submit = document.querySelector("input[type=submit]");
41    input_submit.addEventListener("click", function (e) {
42      // フォームの送信キャンセル
43      e.preventDefault();
44
45
46      // 文字列置換
47      const rep = "replPoint"
48      let input_etc = document.getElementsByTagName("textarea")[0].value;
49      console.log(input_etc);
50      let allcont = document.getElementsByTagName("textarea")[1].value;
51      console.log(typeof allcont);
52      let resultText = allcont.replace(new RegExp(rep), input_etc);
53      console.log(resultText);
54
55      // 送信ボタン
56      let input_submit = document.querySelector("input[name=btn_submit]");
57      // 非表示の項目（セッションの受け渡しなどで使用）
58      let input_hidden = document.querySelector("input[name=form_session]");
59    });
60  </script>
61</body>
62
63</html>

備考

// 文字列置換
      const rep = "replPoint"
      let input_etc = document.getElementsByTagName("textarea")[0].value;
      console.log(input_etc);
      let allcont = document.getElementsByTagName("textarea")[1].value;
      console.log(typeof allcont);
      let resultText = allcont.replace(new RegExp(rep), input_etc);
      console.log(resultText);

上記がテキストエリアを取得して出力したいと思っているソースになります。

現状考えうる手法で記述しておりますので、効率的・簡略して記述できる場合その記述も教えていただきたいです。
よろしくお願いいたします。

m.ts10806

2022/09/02 22:55

>「変換後」テキストエリアに出力ができないそもそもどこにも上記実現に向けて書かれたコードがないように見受けられます。どの部分でそこを表現されているのでしょうか？

kings_of_king12

2022/09/03 00:02

// 文字列置換 const rep = "replPoint" let input_etc = document.getElementsByTagName("textarea")[0].value; console.log(input_etc); let allcont = document.getElementsByTagName("textarea")[1].value; console.log(typeof allcont); let resultText = allcont.replace(new RegExp(rep), input_etc); console.log(resultText); こちらが該当箇所となります。 input_etcが「ソース」に入力された文字列。 allcontが「変換後」に既にある文字列を入れた変数。 resultTextはinput_etcの文字列が、allcontの文字列"replPoint"をreplace()しています。 console.logで「ソース」の文字列、「変換後」の文字列どちらとも取得できているのですが、変換後に出力する方法がわからず手詰まりな状態です。

m.ts10806

2022/09/03 00:21

取得ができるなら設定もできるのでは。 https://www.javadrive.jp/javascript/form/index2.html

m.ts10806

2022/09/03 00:22

あと、id振られてるならidで取得したほうが良いです。番号固定だと変更に弱くなります。

行動規範の内容に同意します

回答1件

ベストアンサー

シンプルに値入れるだけでいいなら下のようにすればいいかと。

JavaScript
1let resultText = allcont.replace(new RegExp(rep), input_etc);
2console.log(resultText);
3
4document.getElementsByTagName("textarea")[1].value = resultText;//←追加