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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

置換

置換とは文字列中の特定の文字に対して、別の文字列に置き換えることを指します。

Q&A

解決済

4回答

19756閲覧

テキストエリア内の改行コードをJavascriptで<br>に置換したい

hamst

総合スコア14

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

置換

置換とは文字列中の特定の文字に対して、別の文字列に置き換えることを指します。

0グッド

0クリップ

投稿2018/08/16 12:47

編集2018/08/16 15:47

前提・実現したいこと

サイトの問い合わせフォームのテキストエリアの内容を
プレビューでモーダルウィンドウに表示したいのですが、
そのまま表示しても改行されないので、Javascriptで改行コードを
<br>に置換しようとするのですが、置換がうまくいきません。
確認したブラウザはChromeです。

置換で試したスクリプトは以下です。

◯例1
content_value.replace(/(\n|\r)/g, "<br>");
◯例2
content_value.replace(/\r?\n/g, "<br>");

発生している問題・エラーメッセージ

Uncaught SyntaxError: Invalid regular expression: missing /

色んなサイトで紹介されている置換コードはほとんど試したのですが、同様のエラーが出ます。

試したこと

置換スクリプト内で改行として認識されているようなので、
下記のようにバックスラッシュを増やしてみたりもしたのですが、
エラーは消えましたが置換はされませんでした。

content_value.replace(/(\n|\r)/g, "<br>");

エラーが出ている記述

phpファイルはUTF-8、BOMなし、改行コード:CR+LF

php

1<?php 2 3$html=<<<HTML 4<!DOCTYPE html> 5<html lang="ja"> 6 <html> 7 <head> 8 <meta charset="UTF-8"> 9 <link rel="stylesheet" href="./modaal.css"> 10 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> 11 <script src="./modaal.js"></script> 12 </head> 13 <body onCopy="return false;"> 14 15 16 <!-- モーダルウィンドウに表示するテキストエリアフォーム --> 17 <div class="contentsLineBox"> 18 <textarea id="postContents" name="sentence"></textarea> 19 </div> 20 21 <!-- モーダルウィンドウ表示内容 --> 22 <div id="modal" style="display:none;"> 23 <p id="contentsPreview"></p> 24 </div> 25 26 <!-- モーダルウィンドウ表示ボタン --> 27 <a href="#modal" id="preview" class="modal">プレビュー</a> 28 29 <script> 30 $('.modal').modaal({ 31 type: 'inline', // コンテンツのタイプを指定 32 animation_speed: '500', // アニメーションのスピードをミリ秒単位で指定 33 background: '#fff', // 背景の色を白に変更 34 overlay_opacity: '0.9', // 背景のオーバーレイの透明度を変更 35 fullscreen: 'false', // フルスクリーンモードにする 36 background_scroll: 'false', // 背景をスクロールさせるか否か 37 loading_content: 'Now Loading, Please Wait.' // 読み込み時のテキスト表示 38 }); 39 40 $(function (){ 41 $("#preview").on("click", function(){ 42 var content_value = $("#postContents").val(); 43 <!-- 改行コードを置換 --> 44 content_value.replace(/\r?\n/g, "<br>"); 45 46 47 $("#contentsPreview").html(content_value); 48 }); 49 }); 50 </script> 51</div> 52</form> 53 54 55 56 57 58 </body> 59</html> 60HTML; 61 62echo $html; 63?>

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

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

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

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

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

m.ts10806

2018/08/16 13:11 編集

どちらも再現しませんね。例1、例2いずれも改行タグに置換されます。現在の質問文のコードをコピペして試しても当該エラーは発生しませんでしたので、もしかしたら本来入れるべきはない情報が入っているかもしれませんので、実際のコードからコピペの上、エラーメッセージと同じくコードブロックで囲ってください。コードブロック外の文章の場合、空白など自動で置換されてしまいます。再現可能なコードを提示するにはコードブロックで囲い冒頭```を```JavaScriptなど言語名を入れてください(jsで省略可能)https://teratail.com/questions/7119
m.ts10806

2018/08/16 13:12

あと気になるとしたらBOM付きかどうかとか、ファイルの文字コードとhtmlで宣言している文字コードが違うのではないかとか、いずれにしてもコードがこれだけでは判断できません。確認したブラウザなど環境情報も含めて出せるものはすべて提示してください。
hamst

2018/08/16 14:08 編集

ご回答ありがとうございます。 (自分で思う)無駄なものを削ってみましたが、相変わらずでした。 確認したブラウザはChromeで、BOMはなしです。文字コードも統一しています。 実際のコードを追記、サーバーにアップロードしたのでそのURLも追記しました。
hamst

2018/08/16 14:11 編集

あ、引っ張ってきているJSファイルがShift-Jisでした。これですかね原因は_(:3」∠)_
hamst

2018/08/16 14:14

cssとjsファイルをUTF-8に変更して上げ直し、キャッシュも削除した上で実行してみましたが不具合は変わりませんでした
m.ts10806

2018/08/16 21:13

PHPってタグもついていなかったし今もコード追記したにも関わらずタグが変わっていません。前程が大きく崩れて回答やコメントが全て無駄になります。持っている情報を一通り出さないなら振り回すだけになって今後回答がつかなくなりますよ。
guest

回答4

0

自己解決

置換部分を下記に書き換えたら動きました。

var replacedText = content_value.replace(/\r\n|\r|\n/g, '<br>');
$("#contentsPreview").html(replacedText);

回答してくださった方々ありがとうございました。

投稿2018/08/16 14:52

hamst

総合スコア14

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

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

0

こちらのエントリーシートの入力エラー(JavaScript)がうまく表示されませんx_xさんの回答のように、htmlとjsとで文字コードが違うってことはないですかね?

PHP

1$html=<<<HTML

PHP

1$html=<<<'HTML'

としていかがでしょうか?

投稿2018/08/16 12:58

編集2018/08/16 14:44
papinianus

総合スコア12705

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

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

papinianus

2018/08/16 12:59

jsがutf-8なのは分かったのですが、html側(jsを呼び出している側)がutf-8でない、ということはないでしょうか?
hamst

2018/08/16 14:02

UTF-8で統一できているはずなのですが、自信がなくなってきました。 実際のコードと、それをサーバーにアップロード(URLを質問文に追記)しました。
papinianus

2018/08/16 14:43

phpでヒアドキュメントで出力していたとは思いませんでした。回答追記
hamst

2018/08/16 14:44

すみません。
guest

0

静的ファイル(HTML)だと問題なく動くことがわかりました。
しかし、その内容をphpで読み込んでechoするとダメになるみたいです。

投稿2018/08/16 14:43

編集2018/08/16 14:45
hamst

総合スコア14

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

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

papinianus

2018/08/16 14:46

ヒアドキュメントと言う仕組みが、エスケープシークエンスを解釈してしまって\r\nを改行文字扱いに変更してしまいます。ただ、だとしたら\rとかでも動くはずなので、何か私も考え違いをしているのかもしれません
guest

0

この過去の質問と同じではないですか?

投稿2018/08/16 12:55

spookybird

総合スコア1803

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

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

hamst

2018/08/16 12:57

この質問は見ましたが、ファイルはUTF-8で作成しており全角でもありませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.37%

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

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

質問する

関連した質問