ホームページ ウェブフロントエンド jsチュートリアル javascript_javascript スキルを使用してテキスト URL アドレスにリンクを自動的に追加する方法を共有する

javascript_javascript スキルを使用してテキスト URL アドレスにリンクを自動的に追加する方法を共有する

May 16, 2016 pm 05:03 PM
url 文章 リンク

URL アドレスの自動追加の実装は、実際には検出と置換だけで構成されます。

検出

「検出」は、http アドレスに一致するコンテンツがテキスト (文字列) にあるかどうかを検出することです。この作業は、フロントエンドと の両方で実行できます。ここでは、JavaScript を使用して実装されるフロントエンド メソッドのみについて説明します。

HTTP アドレスを検証するための正規表現は次のとおりです (省略または不正確な可能性があります。修正してください):

コードをコピー コードは次のとおりです。

var reg = /(http:// |https://)((w|=|?|.|/|&|-) )/g;

最初の部分は http または https で始まる URL 文字列アドレスに一致し、後半部分は一部の文字、英語文字、アンダースコア (_)、ピリオド (.)、疑問符 (?)、等号 (=) に一致し、接続されます。短い行 (-) を待ってください。

Replace www.jb51.net
JavaScript の置換関数に関して、最初に思い浮かぶのは当然、replace 属性です。replace 属性の利点は、正規表現をサポートし、置換できることです。正規表現に準拠した文字列。たとえば、文字列の両端のスペースを置換する場合は、次のようなステートメントを使用できます:

コードをコピー コードは次のとおりです:

var s = "blank";
s = s.replace(/^s (.*?)s $/, "");
alert(s);

は「空白」となり、両端のスペースが削除されます。同様に、一致する http アドレスを、 タグ

にネストされた href 属性を含む http アドレスに置き換えるだけです。

たとえば、この式は http、https、ftp、ftps の URL アドレスと IP アドレスに一致します。

コードをコピー コードは次のとおりです。

var URL = /(https?:/ /|ftps ?://)?((d{1,3}.d{1,3}.d{1,3}.d{1,3})(:[0-9] )?|( [w] .)(S )(w{2,4})(:[0-9] )?)(/?([w#!:.? =&%@!-/] ))?/ig ;

URL アドレスの一致計算は比較的完了しています。この式を使用して、ユーザーのメッセージの URL アドレスをクリック可能なリンクに置き換える 2 つの小さな関数を作成しました。URL をリンクに置き換えるには、それほど難しいことはありません。

コードをコピー コードは次のとおりです:
/**
* JavaScript バージョン
* URL アドレスを完全な A タグリンクコードに変換
*/
var replaceURLToLink = function (text) {

text = text.replace(URL, function (url) {
var urlText = url;
if (!url.match('^https?: //')) {
url = 'http://' url;
テキストを返す;
};

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

マグネットリンクの使い方 マグネットリンクの使い方 Feb 18, 2024 am 10:02 AM

マグネット リンクは、リソースをダウンロードするためのリンク方法であり、従来のダウンロード方法よりも便利で効率的です。マグネット リンクを使用すると、中間サーバーに依存せずに、ピアツーピア方式でリソースをダウンロードできます。この記事ではマグネットリンクの使い方と注意点を紹介します。 1. マグネット リンクとは? マグネット リンクは、P2P (Peer-to-Peer) プロトコルに基づくダウンロード方式です。ユーザーはマグネット リンクを通じてリソースの発行者に直接接続し、リソースの共有とダウンロードを完了できます。従来のダウンロード方法と比較して、磁気

115://で始まるリンクをダウンロードするにはどうすればよいですか?ダウンロード方法の紹介 115://で始まるリンクをダウンロードするにはどうすればよいですか?ダウンロード方法の紹介 Mar 14, 2024 am 11:58 AM

最近、多くのユーザーから、115:// で始まるリンクをダウンロードするにはどうすればよいかという質問が編集者に寄せられました。 115:// で始まるリンクをダウンロードしたい場合は、115 ブラウザを使用する必要があります。115 ブラウザをダウンロードしたら、以下のエディタによって作成されたダウンロード チュートリアルを見てみましょう。 115:// で始まるリンクをダウンロードする方法の紹介 1. 115.com にログインし、115 ブラウザをダウンロードしてインストールします。 2. 115 ブラウザのアドレス バーに chrome://extensions/ と入力し、拡張機能センターに入り、Tampermonkey を検索して、対応するプラグインをインストールします。 3. 115 ブラウザのアドレス バーに「Grease Monkey Script: https://greasyfork.org/en/」と入力します。

WeChat ビデオ アカウントのリンクを取得するにはどうすればよいですか?製品リンクを WeChat ビデオ アカウントに追加するにはどうすればよいですか? WeChat ビデオ アカウントのリンクを取得するにはどうすればよいですか?製品リンクを WeChat ビデオ アカウントに追加するにはどうすればよいですか? Mar 22, 2024 pm 09:36 PM

WeChat エコシステムの一部として、WeChat ビデオ アカウントはコンテンツ作成者や販売者にとって徐々に重要なプロモーション ツールになってきました。このプラットフォームでビデオ アカウントへのリンクを取得することは、コンテンツを共有および配布するために非常に重要です。以下では、WeChatビデオアカウントのリンクを取得する方法と、コンテンツの普及効果を高めるためにビデオアカウントに商品リンクを追加する方法を詳しく紹介します。 1. WeChat ビデオ アカウントのリンクを取得するにはどうすればよいですか? WeChat ビデオ アカウントにビデオを投稿すると、システムによってビデオ リンクが自動的に作成されます。著者は公開後にリンクをコピーして、共有と配布を容易にすることができます。 WeChat ビデオ アカウントにログインした後、ビデオ アカウントのホームページを閲覧できます。ホーム ページでは、各ビデオに対応するリンクが付いているので、ビデオを直接コピーしたり共有したりできます。 3. ビデオ アカウントの検索: WeChat 検索ボックスにビデオ アカウント名を入力します。

Outlook が Edge ブラウザーでリンクを開かないようにする方法 Outlook が Edge ブラウザーでリンクを開かないようにする方法 Aug 03, 2023 am 11:49 AM

Outlook が Edge でリンクを開かないようにする方法 続行する前に、優先ブラウザが Windows のデフォルト ブラウザとして設定されていることを確認してください。これにより、Outlook リンクが目的のブラウザーで開くようになります。デフォルトのブラウザを確認して設定するには: Windows 10 の場合: [スタート] メニューをクリックし、[設定] を選択します。 [アプリ]、[デフォルトのアプリ] の順に移動します。 デフォルトのアプリのリストの一番下にある [Web ブラウザ] を探します。 好みのブラウザがリストされている場合は、準備完了です。 Microsoft Edge がリストされている場合は、それをクリックし、リストからお好みのブラウザーを選択します。プロンプトが表示されたら、「とにかく切り替える」をクリックします。エッジの問題を修正する

最新のiOS 17システムでiPhoneにApple Notesを接続する方法 最新のiOS 17システムでiPhoneにApple Notesを接続する方法 Sep 22, 2023 pm 05:01 PM

リンクの追加機能を使用して iPhone で AppleNotes をリンクします。注: iOS17 がインストールされている場合、iPhone 上で Apple Notes 間のリンクを作成することができます。 iPhone でメモ アプリを開きます。次に、リンクを追加するメモを開きます。新しいメモを作成することもできます。画面上の任意の場所をクリックします。メニューが表示されます。右側の矢印をクリックして、「リンクの追加」オプションを表示します。クリックして。ここで、メモの名前または Web ページの URL を入力できます。次に、右上隅の「完了」をクリックすると、追加されたリンクがメモに表示されます。単語にリンクを追加したい場合は、単語をダブルクリックして選択し、「リンクを追加」を選択して、 を押します。

動画リンクの要件は何ですか?動画アカウントとグッズを連携するにはどうすればいいですか? 動画リンクの要件は何ですか?動画アカウントとグッズを連携するにはどうすればいいですか? Mar 07, 2024 pm 01:13 PM

ショートビデオプラットフォームの人気に伴い、コンテンツの作成や宣伝にビデオアカウントを使用するクリエイターが増えています。動画アカウントは個人の才能を紹介するだけでなく、製品リンクを通じて商業的な収益化も実現できます。ただし、動画アカウントへのリンクを追加するには、特定の条件を満たす必要があります。 1. ビデオリンクの要件は何ですか?ビデオ アカウント認証は、ビデオ アカウントにリンクを追加するための前提条件です。現在、DouyinやKuaishouなどの主要なショートビデオプラットフォームは、主に個人認証と機関認証の2種類の認証サービスを提供しています。個人認証には実際の身元情報の提出が必要ですが、機関認証には関連する企業または組織からの認証資料の提供が必要です。認証が完了すると、ユーザーは自分のビデオ アカウントにリンクを追加して、アカウントの信頼性と権限を強化できます。動画リンクの 1 つ

PHP 関数の紹介 - get_headers(): URL の応答ヘッダー情報を取得します PHP 関数の紹介 - get_headers(): URL の応答ヘッダー情報を取得します Jul 25, 2023 am 09:05 AM

PHP 関数の紹介 - get_headers(): URL の応答ヘッダー情報の取得の概要: PHP 開発では、Web ページまたはリモート リソースの応答ヘッダー情報を取得する必要があることがよくあります。 PHP 関数 get_headers() を使用すると、対象 URL の応答ヘッダー情報を簡単に取得し、配列の形式で返すことができます。この記事では、get_headers() 関数の使用法を紹介し、関連するコード例をいくつか示します。 get_headers() 関数の使用法: get_header

e からの NameResolutionError(self.host, self, e) の理由とその解決方法 e からの NameResolutionError(self.host, self, e) の理由とその解決方法 Mar 01, 2024 pm 01:20 PM

エラーの理由は、urllib3 ライブラリの例外タイプである NameResolutionError(self.host,self,e)frome です。このエラーの理由は、DNS 解決が失敗したこと、つまり、ホスト名または IP アドレスが試みられたことです。解決できるものが見つかりません。これは、入力された URL アドレスが間違っているか、DNS サーバーが一時的に利用できないことが原因である可能性があります。このエラーを解決する方法 このエラーを解決するにはいくつかの方法があります。 入力された URL アドレスが正しいかどうかを確認し、アクセス可能であることを確認します。 DNS サーバーが利用可能であることを確認します。コマンド ラインで「ping」コマンドを使用してみてください。 DNS サーバーが利用可能かどうかをテストします。プロキシの背後にある場合は、ホスト名の代わりに IP アドレスを使用して Web サイトにアクセスしてみてください。

See all articles