テキストをハイパーリンク<a>と画像タグ<img>に変換します

debugcn 投稿 Dev

ダガルティ

この関数を使用して、テキストをクリック可能なリンク（<a href=""> </a>）に変換し、画像のURLをimgタグ（<img src="" />）に変換しています。

const parsecontent = (text)=>{
    var ishyperlink= /([^\S]|^)((https?\:\/\/)(\S+))/gi;
    return (text || "").replace(ishyperlink,
    function(match, space, url){
       var isimglink = /https?:\/\/.*\.(?:png|jpg|gif|jpeg)/i;
        if (url.match(isimglink)) {
         return space + '<a href="' + url + '"><img src="' + url + '" /></a>';
        }
     return space + '<a href="' + url + '">' + url + '</a>';
    }
  );
}

このように使う

const div = document.querySelector("#content");
div.innerHTML = parsecontent(div.innerHTML);

コンテンツに適切なスペースがあれば、問題なく動作します。それはリンクします、それが失敗するスペースで区切られていない画像のURL。plsは私がこれを修正するのを手伝ってくれますか？

Codepenはこちらhttps://codepen.io/dagalti/pen/GRqpYLp

マイケルハミルトン

私はあなたのテストケースを満たすように調整された正規表現を思いついた。

この正規表現は、URLを照合する方法です。

((https?\:\/\/)([\w!"#$%&\'()*+,-./@:;=\^_`{|}~]*))

あなたの例では、間に空白を入れずに2つのURLがあります。URLとURL以外の文字列の間に空白がない場合はどうなりますか？我々は可能性があり、それは（例えば、TLDに到達したとき、一致を終了.com、.org等）。ただし、あなたの例を満たすために、空白なしで区切られた2つのURLを処理していると仮定しています。その場合、新しいURLの開始に気付いたときに、一致を終了します(?=https?)。

([^\S]|^)((https?\:\/\/)([\w!"#$%&\'()*+,-./@:;=\^_`{|}~]*))(?=https?)

次に、空白で囲まれたURLを照合します。

((https?\:\/\/)([\w!"#$%&\'()*+,-./@:;=\^_`{|}~]*))

これらすべてをまとめると、次の正規表現が得られます。

([^\S]|^)((https?\:\/\/)([\w!"#$%&\'()*+,-./@:;=\^_`{|}~]*))(?=https?)|((https?\:\/\/)([\w!"#$%&\'()*+,-./@:;=\^_`{|}~]*))

replaceロジックも少し調整する必要があります。

const parsecontent = (text)=>{
    var ishyperlink= /([^\S]|^)((https?\:\/\/)([\w!"#$%&\'()*+,-./@:;=\^_`{|}~]*))(?=https?)|((https?\:\/\/)([\w!"#$%&\'()*+,-./@:;=\^_`{|}~]*))/gi;
    return (text || "").replace(ishyperlink,
    function(url){
       var isimglink = /https?:\/\/.*\.(?:png|jpg|gif|jpeg)/i;
        if (url.match(isimglink)) {
         return '<a href="' + url + '"><img src="' + url + '" /></a>';
        }
     return '<a href="' + url + '">' + url + '</a>';
    }
  );
}

この正規表現は非常に冗長である、あなたのテストケースを満たす、より簡潔な方法があるかもしれません（私はありませんregexpertが）

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-05-30

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

テキストをハイパーリンク<a>と画像タグ<img>に変換します

テキストをハイパーリンク<a>と画像タグ<img>に変換します

画像のバイナリデータをimgタグに変換します

既存の<img>タグと<a>タグを変更せずに、特定のテキストをハイパーリンクに置き換えるにはどうすればよいですか？

img をリンクに変換し、 <a> タグをそれに含まれる画像の高さにする方法

BBCode [IMG]を<img>に変換します

Angularのテキストと<img>タグを含む文字列からスライダーに画像を表示する

imgタグ付きのdivを画像に変換する方法

div内のimgタグを、テキストが上にあるdivの背景画像として使用します

画像がimgタグに読み込まれたことを検出する

画像がimgタグに読み込まれたことを検出する

AngularJSは双方向のデータバインディングを使用して、画像をソースとしてimg要素タグに表示しますか？

クリックして戻ると、ハイパーリンクテキストをドロップダウンに変更します

Android：「フラグメント」でテキストをハイパーリンクに変更する方法

imgタグをjavascriptと交換する

imgタグなしでjsで画像をスタイリングする

imgリンクにカーソルを合わせたときにテキストを変更する

onclick変更画像をidタグなしのさまざまなimg量に添付します

アンカータグとImgタグがPHPファイルまたは画像を見つけられない

ハイパーリンクをサポートしていないテキスト エディター用に、ハイパーリンクを代替テキスト付きのクリップボードにコピーします。

TYPO3RTEは<img>を<amp-img>に変換します

テキストプロパティにさまざまなテキストフォーマットとハイパーリンクを配置する方法

フラグメント内のテキストビュー内にハイパーリンクを作成する

カールリクエストの画像をhtml <img>タグで表示する

Javascriptはキャンバスをimgに変換します

画像タグをimgタグにラップする方法

img htmlタグに複数の代替画像ソースを提供しますか？

Excelでハイパーリンクの表示テキストをトリミングする方法

imgタグを使用して画像グリッドを表示する

テキストではなくアイコンとしてハイパーリンクを表示する

テーブルをExcelにエクスポートした後、ハイパーリンクがテキストとして表示されます

ハイパーリンクをサポートしていないテキストエディター用に、ハイパーリンクを代替テキスト付きのクリップボードにコピーします。