質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

3回答

7778閲覧

【JavaScript】テキストエリアに改行して入力した文字列が表示できない

Sfidante

総合スコア90

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

0クリップ

投稿2015/08/03 08:09

編集2022/01/12 10:55

テキストエリアに改行して文字を入力して
改行された状態で違う箇所へ表示させたいのですが、
改行処理がうまくいかずに
まったく表示できない状況です。

このメッセージをMySQLへ保存しており、
リロードして表示させると



という上記の文字は

あ い う

という具合にスペース認識として表示されてしまいます。

正規化の仕方がおかしいのかと思いますが、
エラーの箇所が
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
であり、
Uncaught SyntaxError: Unexpected token
といったエラー内容になっているので、
単純に文法のエラーとも考えています。

下記にJavaScriptを記載いたしますので、
ご教授いただけると幸いです。

javascript

1<script type="text/javascript"> 2var webSocket; 3window.onload = function() { 4 var forRtoA = document.createElement('a'); 5 forRtoA.href = "loadMessage"; 6 webSocket = new WebSocket(forRtoA.href.replace("http://", "ws://").replace("https://", "wss://")); 7 var messageArea = document.getElementById("message-list"); 8 var sessionid = document.getElementById("sessionID").value; 9 var photo = document.getElementById("yourphoto").value; 10 11 var appendMessage = function(value, session) { 12 var string = value.replace("/[\r\n|\n|\r]/g", "<br>"); 13 var messageElement = document.createElement("messageArea"); 14 var time = new Date(); 15 var month = time.getMonth() + 1; 16 if(month < 10) { month = "0" + month; } 17 var day = time.getDate(); 18 if(day < 10) { day = "0" + day; } 19 var hour = time.getHours(); 20 if(hour < 10) { hour = "0" + hour; } 21 var minute = time.getMinutes(); 22 if(minute < 10) { minute = "0" + minute; } 23 var now = month + "/" + day + " " + hour + ":" + minute; 24 if(session == sessionid){ 25 messageElement.innerHTML = '<li class="msg_send"><div class="inner-box"><p class="balloon_right" id="messageArea">' + string + '</p></div></li><p class="time_send">' + now + '</p>'; 26 }else{ 27 messageElement.innerHTML = '<li class="msg_recieve"><a href="" target="_blank"><img src="' + photo + '" alt="メッセージ相手写真" class="c-message_photo img-circle c-photo_mini"></a><div class="inner-box2"><p class="balloon_left">' + string + '</p></div></li><p class="time_recieve">' + now + '</p>'; 28 } 29 messageArea.appendChild(messageElement); 30 var message_box = document.getElementById("message_box"); 31 message_box.scrollTop = message_box.scrollHeight; 32 } 33 34 webSocket.onmessage = function(message) { 35 var data = JSON.parse(message.data); 36 appendMessage(data.text, data.sessionid); 37 } 38 39 var messageInput = document.getElementById("c-btn_chenge"); 40 var messageText = document.getElementById("messageInput"); 41 messageInput.onclick = function() { 42 var message = messageText.value; 43 if (webSocket && "" != message) { 44 webSocket.send(message); 45 messageText.value = ""; 46 } 47 } 48} 49</script>

何度も同じ質問をしてしまい申し訳ありませんが
よろしくお願いいたします。


追記

メッセージのサーバー側の処理を記載いたします。

java

1@OnMessage 2 public void onMessage(String message , Session sessionID) throws IOException, ServletException { 3 // クライアントからの受信時 4 for (Session session : sessions) { 5 session.getBasicRemote().sendText("{\"command\":\"message\", \"text\": \"" + message.replace("\\", "\\\\").replace("\"", "\\\"") + "\" , \"sessionid\": \"" + sessionid + "\"}"); 6 MessageDao messagedao = new MessageDao(); 7 try{ 8 messagedao.connect(); 9 int userid = messagedao.selectSessionID(sessionid).getUserid(); 10 int roomid = messagedao.selectSessionID(sessionid).getRoomid(); 11 messagedao.insertMessage(userid, roomid, message); 12 messagedao.close(); 13 }catch(Exception e){ 14 e.printStackTrace(); 15 } 16 } 17 }
ikuwow👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

orange0190

2015/08/03 08:12

前回の質問に答えたんだが、replaceを消すとエラーは消えますか?
Sfidante

2015/08/03 08:15

replaceを消してもエラーは消えておりません。
guest

回答3

0

調べてみたらこんなのがヒットしました。

http://piyopiyocs.blog115.fc2.com/blog-entry-933.html

javascript

1value.replace(/\r?\n/g, "<br>");

と書けばいいらしいです。(試してないのであくまで推測。汗)

投稿2015/08/03 09:28

yu-ri

総合スコア634

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Sfidante

2015/08/03 09:30

ご回答有難うございます。 こちらの記述は試してみたのですが、 うまくうまくいきませんでした。 お手数おかけして申し訳ございません。
yu-ri

2015/08/03 10:36

うーん…となると原因は他にありそうですね… この件に関係ないかもしれませんが、1点気になったところがあります。 var messageElement = document.createElement("messageArea"); ↑ この行が引っかかるのですが…これって文法上正しかったですっけ(汗 jQuery使用可であれば、ちょっくら書き換えてみたいのですが…。
Sfidante

2015/08/03 10:51

コメントありがとうございます。 現状、不具合が出ているのが、 改行処理だけですので、 正しいのではないかと思っておりました。 ↓参考ページです。 http://javascriptist.net/ref/document.createelement.html このページを参考にすると、 var messageElement = document.createElement("ul");←今回のタグはul でしょうか? 実際に変更して行いましたが、動作は変わりませんでした。 jQueryを使うことも考えたのですが、 今回は使わない方向で進めていこうかと考えておりました。 (まだプログラミングを始めたばかりですので、基本からと)
yu-ri

2015/08/03 11:03 編集

コンソールログの見方がお分かりでしたら、 console.log(string) とかで確認してみるのも一つの手です。または alert(string) で表示してみるとか…まあデバッグを1つ1つやっていきましょう。
Sfidante

2015/08/03 12:20

そうですね。 どこがなぜおかしいのかの原因究明からおこなっていきます。
guest

0

replace の正規表現がおかしいと思われます。

javascript

1/* NG */ value.replace("/[\r\n|\n|\r]/g", "<br>"); 2/* OK */ value.replace(/\r\n|\n|\r/g, "<br>");

正規表現を書くなら文字列リテラルではなく正規表現リテラルで。

投稿2015/08/03 08:22

編集2015/08/03 12:44
ngyuki

総合スコア4514

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Sfidante

2015/08/03 08:28

ご指摘ありあがとうございます。 value.replace(/[\r\n|\n|\r]/g, "<br>"); に変更いたしましたが、 結果は変わりませんでした。
guest

0

javascript

1 webSocket.onmessage = function(message) { 2 var data = JSON.parse(message.data); 3 appendMessage(data.text, data.sessionid); 4 }

この部分のmessage.dataを表示すると何が出ますか?

投稿2015/08/03 08:18

編集2015/08/03 08:18
orange0190

総合スコア1698

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Sfidante

2015/08/03 08:26

{"command":"message", "text": "文字", "sessionid": "セッションID"} が出力されます。
orange0190

2015/08/03 08:28

すみません。私が示したreplaceが悪かったみたいです。 ngyukiさんの回答を試してみてください。
Sfidante

2015/08/03 08:33

ngyukiさんの回答を試してみましたが、 結果は変わりませんでした。 原因がわからず何から何まで申し訳ありません。
eripong

2015/08/03 14:43 編集

横から失礼します。 ここの、"文字"となっている部分は、どういう文字列ですか? 改行はどの様になっているのか知りたいです。 サーバから受信した時点で改行が消えている 可能性があるかなと思います。
Sfidante

2015/08/03 17:39

eripongさんコメントありがとう御座います。 >サーバから受信した時点で改行が消えている >可能性があるかなと思います。 その可能性はあると思います。 メッセージを送信するonMessageメソッドを 追記と致します。 よろしくお願いいたします。
eripong

2015/08/03 22:03

コードも必要ですが、 console.log(message.data); や、 alert(message.data) で表示した結果を教えてください。 onMessageメソッドでsendTextの引数をログ出力しても良いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問