textareaで入力内容を文字列として認識させる方法

Question

webrtcのチャット機能を作っています。
チャットでコードを入力するとコードとして読み取ってしまいます。
<input>みたいにコードを入力しても文字列として、そのまま出せるようにするにはどうしたらいいですか？

<!-- 入力フォーム -->
<div id="wrap"><div id="connections"><span class="filler"></span></div>
  <div class="clear"></div>
  <form id="send">
    <textarea type="text" id="text" placeholder="メッセージを入力" autocomplete="off"></textarea>
    <label>
      <button class="button" type="submit"><i class="material-icons">send</i></button>
    </label>
  </form>
</div>

//出力の処理
  function connect(room) {
    // Handle a chat connection.
    jQuery('#text').focus();
    const chatbox = jQuery('<div></div>').addClass('connection').addClass('active').attr('id', room.name);
    const roomName = room.name.replace('sfu_text_', '');
    const header = jQuery('<h1></h1>').html('ID: <strong>' + roomName + '</strong>');
    const messages = jQuery('<div><em>接続しました。メッセージを入力してください。</em></div>').addClass('messages');
    chatbox.append(header);
    chatbox.append(messages);
    // Select connection handler.
    chatbox.on('click', () => {
      chatbox.toggleClass('active');
    });

    jQuery('.filler').hide();
    jQuery('#connections').append(chatbox);

    room.getLog();
    room.once('log', logs => {
      for (let i = 0; i < logs.length; i++) {
        const log = JSON.parse(logs[i]);

        switch (log.messageType) {
          case 'ROOM_DATA':
            messages.append('<div>' + log.message.data + '</div>');
            break;
          case 'ROOM_USER_JOIN':
            if (log.message.src === peer.id) {
              break;
            }
            messages.append('<div>相手が入室しました。 </div>');
            break;
          case 'ROOM_USER_LEAVE':
            if (log.message.src === peer.id) {
              break;
            }
            messages.append('<div>相手が退出しました。 </div>');
            break;
        }
      }
    });

    room.on('data', message => {
      if (message.data instanceof ArrayBuffer) {
        const dataView = new Uint8Array(message.data);
        const dataBlob = new Blob([dataView]);
        const url = URL.createObjectURL(dataBlob);
        messages.append('<div><span class="file">' +
          message.src + ' has sent you a <a target="_blank" href="' + url + '">file</a>.</span></div>');
      } else {
        messages.append('<pre><div><p class="p_peer"><span class="peer">' + message.data + '</span></p></div></pre>');
      }
    });

    room.on('peerJoin', peerId => {
      messages.append('<div>相手が入室しました。 </div>');
    });

    room.on('peerLeave', peerId => {
      messages.append('<div>相手が退出しました。 </div>');
    });
  }

Answer 1

const header = jQuery('<h1></h1>').html('ID: <strong>' + roomName + '</strong>');

この1行を指しているのですか？
そうであれば、.htmlメソッドではなく.textメソッドを使うようにしてください。
そうすればHTMLのタグらしきものもパースせずにそのまま貼り付ける事が出来るようになります。

http://js.studio-kingdom.com/jquery/manipulation/text
ちょっと古い1.9版のドキュメントですが、jQueryは幸い下位互換をかなり重視するライブラリなので1.9でもあまり問題になりませんね。
本家はガチ英語なのでニュアンスを掴むならこちらを確認し、
差異があるかないかという確認に本家の公式ドキュメントを確認すると良いでしょう。

公式ドキュメントの.text: http://api.jquery.com/text/

---

【追記部分対応】

messages.append('<pre><div><p class="p_peer"><span class="peer">' + message.data + '</span></p></div></pre>');

質問文の上のような感じで対応していきましょう。
まずjQuery関数にHTML的な文字列を挿し込むとDOM世界に紐付けられる前の、DOMが出来上がります。

const $message = $('<pre><div><p class="p_peer"><span class="peer"></span></p></div></pre>');
$message.find('span.peer').text(message.data);

messages.append($message);

このように一度$messageといった変数を用意しておき、その中でDOMを作成→textメソッドで注入→改めてmessagesにappendという形でやってみてください。

Comments

[ya_suhn]

せっかく回答して下さったのにすみません。
入力漏れがありました・・。

```javascript
messages.append('<pre><div><p class="p_peer"><span class="peer">' + message.data + '</span></p></div></pre>');
```
この一文になるんですが、試しにmessages.appendのところをmessages.textに変えてみたところ()内のものがすべて表示されてしまいます。message.dataが本文になるのでここだけをtext.()ってのは可能なんでしょうか？

[ya_suhn]

ありがとうございました。
他にも訂正が必要な場所もありましたが、
ほぼ同じやり方で上手くいきました。