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

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

ただいまの
回答率

90.34%

  • JavaScript

    17513questions

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

  • jQuery

    7106questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 335

barao

score 4

 前提・実現したいこと

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

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

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

イメージ説明

 該当のソースコード

    <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使用

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/07/05 17:30

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

    キャンセル

  • barao

    2018/07/05 17:44

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

    キャンセル

  • mts10806

    2018/07/05 17:46

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

    キャンセル

回答 1

checkベストアンサー

+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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/06 09:36 編集

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

    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;
    }
    });

    キャンセル

  • 2018/07/11 11:33

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

    キャンセル

  • 2018/07/11 16:59

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

    キャンセル

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

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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

  • JavaScript

    17513questions

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

  • jQuery

    7106questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

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