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

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

WBOY
WBOYオリジナル
2016-05-16 17:03:161276ブラウズ

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 までご連絡ください。