前提・実現したいこと
テキストエリアに記述した文字を別のブロックに表示させるシステムを制作中です。
テキストの内容は正規表現などを利用し変換しています。
リンクの処理に困っており、下記それぞれ詰んでいます。お助けください。
発生している問題・エラーメッセージ
- 内部リンクと外部リンクが同じテキストエリアに共存できない - 現状「内部リンク」「外部リンク」など決まったテキストしか表示させられず、企業名やページリンクなど柔軟な入力ができない。
該当のソースコード
HTML
1 <div id="txtinput" class=""> 2 <textarea name="txt" rows="6">外部リンクあああhttp://uxmilk.jp/ああああ内部リンク/www.pandanoir.info/entry/2012/09/06/224541いいいい</textarea> 3 </div> 4 <div id="datailBox"> 5 <div class="mainTxt__area"></div> 6 </div>
jQuery
1 //テキストエリアの処理 2 $('#txtinput').on('keyup', 'textarea', function() { 3 let elements_blocks_txtarea = $(document).find('#txtinput').find('textarea'); 4 let elements_blocks_maintxtArea = $(document).find('#datailBox').find('.mainTxt__area'); 5 let cul = Number($(document).find('#txtinput').find('textarea').index(this)); 6 let txtarea_txt = $(this).val(); 7 let p = '</p><p class="mainTxt">'; 8 let outerSerch,outerLink,innerLink,innerSerch; 9 10 //外部リンク内部リンクを振り分け 11 if(txtarea_txt.match(/http/)){ 12 console.log('a:'); 13 outerSerch= "((https?|ftp)(://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+))"; 14 outerLink = new RegExp(outerSerch, "g"); 15 outerLinkTarget = "<a href='$1' target='_blank'>"+'外部リンク'+"</a><span class='newWin'><img src='/resource/images/detail/2015new_icon_use_01.png' alt='newwindow' width='9' height='10'></span>"; 16 txtarea_txt = txtarea_txt.replace(outerLink,outerLinkTarget); 17 }else if(txtarea_txt.match(///)){ 18 console.log('b:'); 19 innerSerch = "(/[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+)"; 20 innerLink = new RegExp(innerSerch,'g'); 21 innerLinkTarget = "<a href='$1' class=''>"+'内部リンク'+"</a>"; 22 txtarea_txt = txtarea_txt.replace(innerLink,innerLinkTarget); 23 } 24 txtarea_txt = `<p class="mainTxt">` + txtarea_txt; 25 txtarea_txt = txtarea_txt.replace(/\r\n/g, "<br>"); 26 txtarea_txt = txtarea_txt.replace(/(\n|\r)/g, "<br>"); 27 txtarea_txt = txtarea_txt.replace(/(<br>){2,}/g, "\n" + p + "\n"); 28 txtarea_txt = txtarea_txt.replace(/<br>/g, "<br>\n"); 29 txtarea_txt = txtarea_txt.replace(/<p class="mainTxt">(\r\n|\n|\r}\b)*</p>/g, ""); 30 txtarea_txt = txtarea_txt.replace(/<p class="mainTxt">(\r\n|\n|\r}\b)*<br>/g, ""); 31 txtarea_txt = txtarea_txt.replace(/<p class="mainTxt">(\n)</p>/g, ""); 32 txtarea_txt = txtarea_txt.replace(/\「\「/g, '<strong>'); 33 txtarea_txt = txtarea_txt.replace(/\」\」/g, '</strong>'); 34 txtarea_txt = txtarea_txt.replace(/\<\</g, '<small class="small__txt">'); 35 txtarea_txt = txtarea_txt.replace(/\>\>/g, '</small>'); 36 txtarea_txt = txtarea_txt.replace(/\{\{/g, '<strong class="txtRed">'); 37 txtarea_txt = txtarea_txt.replace(/\}\}/g, '</strong>'); 38 txtarea_txt += "</p>"; 39 elements_blocks_maintxtArea = elements_blocks_maintxtArea.eq(cul); 40 elements_blocks_maintxtArea.html(txtarea_txt); 41 });
試したこと
正規表現の見直し
外部リンク、内部リンクを別の場所で代入
補足情報(FW/ツールのバージョンなど)
jquery3.3.1使用
回答1件
あなたの回答
tips
プレビュー