テキストエリア内の入力文字を別の場所に出力する際、内部リンクと外部リンクを区別し、同時に表示させたい

Question

前提・実現したいこと

テキストエリアに記述した文字を別のブロックに表示させるシステムを制作中です。
テキストの内容は正規表現などを利用し変換しています。
リンクの処理に困っており、下記それぞれ詰んでいます。お助けください。

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

- 内部リンクと外部リンクが同じテキストエリアに共存できない
- 現状「内部リンク」「外部リンク」など決まったテキストしか表示させられず、企業名やページリンクなど柔軟な入力ができない。

該当のソースコード

    <div id="txtinput" class="">
        <textarea name="txt" rows="6">外部リンクあああhttp://uxmilk.jp/ああああ内部リンク/www.pandanoir.info/entry/2012/09/06/224541いいいい</textarea>
    </div>
    <div id="datailBox">
        <div class="mainTxt__area"></div>
    </div>

        //テキストエリアの処理
        $('#txtinput').on('keyup', 'textarea', function() {
            let elements_blocks_txtarea = $(document).find('#txtinput').find('textarea');
            let elements_blocks_maintxtArea = $(document).find('#datailBox').find('.mainTxt__area');
            let cul = Number($(document).find('#txtinput').find('textarea').index(this));
            let txtarea_txt = $(this).val();
            let p = '</p><p class="mainTxt">';
            let outerSerch,outerLink,innerLink,innerSerch;

            //外部リンク内部リンクを振り分け
            if(txtarea_txt.match(/http/)){
                console.log('a:');
                outerSerch= "((https?|ftp)(://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+))";
                outerLink = new RegExp(outerSerch, "g");
                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>";
                txtarea_txt = txtarea_txt.replace(outerLink,outerLinkTarget);
            }else if(txtarea_txt.match(///)){
                console.log('b:');
                innerSerch = "(/[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+)";
                innerLink = new RegExp(innerSerch,'g');
                innerLinkTarget = "<a href='$1' class=''>"+'内部リンク'+"</a>";
                txtarea_txt = txtarea_txt.replace(innerLink,innerLinkTarget);
            }
            txtarea_txt = `<p class="mainTxt">` + txtarea_txt;
            txtarea_txt = txtarea_txt.replace(/\r\n/g, "<br>");
            txtarea_txt = txtarea_txt.replace(/(\n|\r)/g, "<br>");
            txtarea_txt = txtarea_txt.replace(/(<br>){2,}/g, "\n" + p + "\n");
            txtarea_txt = txtarea_txt.replace(/<br>/g, "<br>\n");
            txtarea_txt = txtarea_txt.replace(/<p class="mainTxt">(\r\n|\n|\r}\b)*</p>/g, "");
            txtarea_txt = txtarea_txt.replace(/<p class="mainTxt">(\r\n|\n|\r}\b)*<br>/g, "");
            txtarea_txt = txtarea_txt.replace(/<p class="mainTxt">(\n)</p>/g, "");
            txtarea_txt = txtarea_txt.replace(/\「\「/g, '<strong>');
            txtarea_txt = txtarea_txt.replace(/\」\」/g, '</strong>');
            txtarea_txt = txtarea_txt.replace(/\＜\＜/g, '<small class="small__txt">');
            txtarea_txt = txtarea_txt.replace(/\＞\＞/g, '</small>');
            txtarea_txt = txtarea_txt.replace(/\｛\｛/g, '<strong class="txtRed">');
            txtarea_txt = txtarea_txt.replace(/\｝\｝/g, '</strong>');
            txtarea_txt += "</p>";
            elements_blocks_maintxtArea = elements_blocks_maintxtArea.eq(cul);
            elements_blocks_maintxtArea.html(txtarea_txt);
        });

試したこと

正規表現の見直し
外部リンク、内部リンクを別の場所で代入

補足情報（FW/ツールのバージョンなど）

jquery3.3.1使用

Comments

[m.ts10806]

どのような文章があってどのような結果となるのでしょうか。例示してください。

[m.ts10806]

もし、リンクに任意の名称を入れたいようでしたらteratailのマークダウンのように別途ルールを設ける必要があります。teratailの場合→ [リンク文言](URL)

[barao]

説明画像を追加したのですがこちらからは見えていません。他の方には見えているのでしょうか？

[m.ts10806]

コードブロック```内はマークダウン機能が効きません。外に出してください。想定通りできているかどうかは編集画面右側のプレビューを見ながら調整してください。

[m.ts10806]

画像よりも実際のテキストデータを提示されて方が良いように思います。（画像ですとコピペで確認できません）

[barao]

ご指摘ありがとうございます。テキストを追加しました。

[m.ts10806]

あれ？だいぶコード変わりましたね。

[barao]

分かりにくいかと思いまして、https://codepen.io/などで実際に動かせるようにしてみました。変更点はそれくらいです。

[m.ts10806]

了解です。変更前コードですとhtmlが不足していてsplitのところでエラーが出たので困っていました。助かります。しかしやはり何かしらルールを設けた方が良さそうですね。内部リンクの判断が「/」だけというのもそうですし、外部リンクでもhttp://example.com/http://example.com/のように連続で書かれた場合にも対応しきれません。

[barao]

ルール制定の部分がネックなので色々不備があり、申し訳ありません。１８時以降は返答が難しいため明日以降の対応になりますことご了承ください。

[m.ts10806]

いえ、不備とは思っていません。何とか素の状態で頑張ろうとするのは素晴しいとは思いますが、決まったテキストではなく任意のもの、しかも外部リンクと内部リンクを織り交ぜるとなるとルール設定をするしかないなと思った次第です。「必ずここにリンクがあって、必ずここにリンクテキストがある」という状態を作らないといけませんし「外部リンクである」「内部リンクである」もわけたほうが確実です。ルールについては自身で決めてしまえば良いかとは思いますし、自由だと思います。毎回打たせるのが面倒であればteratailのマークダウンのようにボタンを押したらそのタグが出るようにしてあげると良いですし。

[barao]

ありがとうございます。勉強になります。

[m.ts10806]

質問への追記・修正の依頼で長々と、しかもあまり回答になっていなくてすみません。※私の場合はルール作ってやってます。JavaScriptではなくkeyup時点でAjaxでPHPに渡して結果受け取るやり方ですが

Answer 1

replace() は第二引数として関数も使えます。

txtarea_txt = txtarea_txt.replace(/[%!#$&'()*+,/:;=?@[]0-9A-Za-z._~-]+/g, function(match, offset, string) {
    if (match.startsWith('http')) {
        // 外部リンク置換処理。
    } else {
        // 内部リンク置換処理。
    }
});

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_function_as_a_parameter

Comments

[barao]

返信が遅くなりまして申し訳ありません。
下記のように置換処理を加えてテストしてみましたが、やはり同居はできないようです。
何か処理記述が間違っていますでしょうか？

txtarea_txt = txtarea_txt.replace(/[%!#$&'()*+,/:;=?@[]0-9A-Za-z._~-]+/g, function(match, offset, string) {
if (match.startsWith('http')) {
outerSerch= "((https?|ftp)(://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+))";
outerLink = new RegExp(outerSerch, "g");
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>";
txtarea_txt = txtarea_txt.replace(outerLink,outerLinkTarget);
return txtarea_txt;
} else {
innerSerch = "(/[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+)";
innerLink = new RegExp(innerSerch,'g');
innerLinkTarget = "<a href='$1' class=''>"+'内部リンク'+"</a>";
txtarea_txt = txtarea_txt.replace(innerLink,innerLinkTarget);
return txtarea_txt;
}
});

[x_x]

リンクも提示しているので読んでください。
matchがマッチした文字列なのでこれを変換して返します。
とくにここで変数 txtarea_txt を書き換えてしまっては意味がなくなってしまいます。

[barao]

ご回答ありがとうございます。
3番目の引数に何を返すかが問題だったという事ですね(^o^)
一つずつ変数を返してみると上手くいくものがありました。
大変勉強になりました。ありがとうございます。