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

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

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

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

JavaScript

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

置換

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

解決済

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

hamst
hamst

総合スコア14

HTML5

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

JavaScript

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

置換

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

4回答

0リアクション

0クリップ

16521閲覧

投稿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

<?php $html=<<<HTML <!DOCTYPE html> <html lang="ja"> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./modaal.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="./modaal.js"></script> </head> <body onCopy="return false;"> <!-- モーダルウィンドウに表示するテキストエリアフォーム --> <div class="contentsLineBox"> <textarea id="postContents" name="sentence"></textarea> </div> <!-- モーダルウィンドウ表示内容 --> <div id="modal" style="display:none;"> <p id="contentsPreview"></p> </div> <!-- モーダルウィンドウ表示ボタン --> <a href="#modal" id="preview" class="modal">プレビュー</a> <script> $('.modal').modaal({ type: 'inline', // コンテンツのタイプを指定 animation_speed: '500', // アニメーションのスピードをミリ秒単位で指定 background: '#fff', // 背景の色を白に変更 overlay_opacity: '0.9', // 背景のオーバーレイの透明度を変更 fullscreen: 'false', // フルスクリーンモードにする background_scroll: 'false', // 背景をスクロールさせるか否か loading_content: 'Now Loading, Please Wait.' // 読み込み時のテキスト表示 }); $(function (){ $("#preview").on("click", function(){ var content_value = $("#postContents").val(); <!-- 改行コードを置換 --> content_value.replace(/\r?\n/g, "<br>"); $("#contentsPreview").html(content_value); }); }); </script> </div> </form> </body> </html> HTML; echo $html; ?>

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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

まだ回答がついていません

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

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

JavaScript

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

置換

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