@johnsonaokiposted at 2022-10-22

Javascriptでhtmlのテキスト要素を取り込みたいです

Q&A

Closed

Javascriptでテキスト要素を取り込みたいです

現在、議事録をまとめるためのWebアプリを作っています。
htmlを下記の通り書きました。
これをワード出力するためにテキストデータを習得したいと思っています。
kekka=["ああああ","いいいい","うううう"]とSpeaker=["a","b","c"]に値を入れると、
無事、htmlには
a:ああああ
b:いいいい
c:うううう

のようにoutputされます。

このoutputの値をテキストデータとしてjavascript で取り出したいと考えています。

そのためのコードをgetElementなどいろいろと試しているのですがうまくいきません。
どうすればよいでしょうか。

取り込み元のhtml

<div id="render"></div>
<script>
let kekka=["ああああ","いいいい","うううう"];
let Speaker=["a","b","c"];

let hyouzi = "";
for (let i=0 ; i<Speaker.length ; i++){
    if (Speaker[i]==Speaker[i+1]){
        hyouzi += kekka[i];
    } else {
        document.getElementById('render').innerText += (Speaker[i]+":"+hyouzi+"\n");
        hyouzi = "";
    };
}

</script>

webページで表示されているoutput

a:ああああ
b:いいいい
c:うううう

上記のテキストデータを受け取るjavascriptを習得したいです

試してみたコード

var textMsg = document.getElementById('render')

どうぞよろしくお願いいたします。

2Answer

@h_kono0707 posted at 2022-10-22

やりたいこととあっているかわかりませんが、こんな感じですか？


for (let i = 0; i < Speaker.length; i++) {
  if (Speaker[i] == Speaker[i + 1]) {
-    hyouzi += kekka[i];
+    hyouzi += kekka[i] + "\n";
  } else {
-    document.getElementById('render').innerText += (Speaker[i]+":"+hyouzi+"\n");
+    document.getElementById("render").innerText += Speaker[i] + ":" + hyouzi + kekka[i] + "\n";
    hyouzi = "";
   }
 }

どんなinputがあったときに、どんなoutputが得たいか書いたほうが回答を得やすいかもしれないです。
例

let kekka = ["aaa", "bbb", "ccc", "ddd"];
let Speaker = ["あ", "あ", "い", "あ"];

のときに以下のように表示したい

あ:aaa
bbb
い:ccc
あ:ddd

一番最初の回答は元の処理を多く残しましたが、私なら以下のように書きます。

for (let i = 0; i < Speaker.length; i++) {
  if (Speaker[i] !== Speaker[i - 1]) {
    hyouzi += Speaker[i] + ":";
  }
  hyouzi += kekka[i] + "\n";
 }
document.getElementById("render").innerText = hyouzi;

1Like

Comments

@johnsonaoki
Questioner
返信ありがとうございます！
僕のつたない質問のせいで意味が伝わらなかったため、意図したものと違いましたが、更にきれいな式を頂けてとてもありがたかったです！
もしよろしければ編集した質問も見ていただけると助かります！

@h_kono0707 posted at 2022-10-22

let textMsg = document.getElementById("render").innerText;で取得できます。
また先程示した以下のJavaScriptであれば

for (let i = 0; i < Speaker.length; i++) {
  if (Speaker[i] !== Speaker[i - 1]) {
    hyouzi += Speaker[i] + ":";
  }
  hyouzi += kekka[i] + "\n";
}
document.getElementById("render").innerText = hyouzi;// 画面表示しなくて良いなら不要
let textMsg = hyouzi;

のようにすればOKです。

「JavaScriptで取り出したい」の判断に迷うところですが本当にやりたいことは以下のようなことですかね？
以下のコードでは画面表示されませんがクリップボードに保存されます。（Ctrl+Vで結果が貼り付けられる状態）

for (let i = 0; i < Speaker.length; i++) {
  if (Speaker[i] !== Speaker[i - 1]) {
    hyouzi += Speaker[i] + ":";
  }
  hyouzi += kekka[i] + "\n";
}
navigator.clipboard.writeText(hyouzi);

もし結果を見てコピーしたいのであれば、以下のようにしておけば良いです。（IEやhttp環境だと動かないです。）

<div id="render"></div>
<button onclick="copy()">コピー</button>
<script>
  let kekka = ["aaa", "bbb", "ccc", "ddd"];
  let Speaker = ["あ", "あ", "い", "あ"];

  let hyouzi = "";
  for (let i = 0; i < Speaker.length; i++) {
    if (Speaker[i] !== Speaker[i - 1]) {
      hyouzi += Speaker[i] + ":";
    }
    hyouzi += kekka[i] + "\n";
  }
  document.getElementById("render").innerText = hyouzi;

  function copy() {
    navigator.clipboard.writeText(
      document.getElementById("render").innerText
    );
    alert("議事録をコピーしました");
  }
</script>

1Like

Comments

@johnsonaoki
Questioner
ありがとうございます！少し試してみます！
つたない質問でこれだけ答えていただきありがとうございました！

Are you sure you want to delete the question?

Javascriptでhtmlのテキスト要素を取り込みたいです

Javascriptでテキスト要素を取り込みたいです

取り込み元のhtml

webページで表示されているoutput

試してみたコード

2Answer

Comments

Comments

Your answer might help someone💌