前提・実現したいこと
サイトの問い合わせフォームのテキストエリアの内容を
プレビューでモーダルウィンドウに表示したいのですが、
そのまま表示しても改行されないので、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?>
回答4件
あなたの回答
tips
プレビュー