5

次の形式のリンクを含む解析テキストが必要です。

[html title](http://www.htmlpage.com)
http://www.htmlpage.com
http://i.imgur.com/OgQ9Uaf.jpg

これら 2 つの文字列の出力は次のようになります。

<a href='http://www.htmlpage.com'>html title</a>
<a href='http://www.htmlpage.com'>http://www.htmlpage.com</a>
<a href='http://i.imgur.com/OgQ9Uaf.jpg'>http://i.imgur.com/OgQ9Uaf.jpg</a>

文字列には、これらのリンクを任意の数だけ含めることができます。つまり、次のようになります。

[html title](http://www.htmlpage.com)[html title](http://www.htmlpage.com)
[html title](http://www.htmlpage.com)   [html title](http://www.htmlpage.com)
[html title](http://www.htmlpage.com) wejwelfj http://www.htmlpage.com

出力：

<a href='http://www.htmlpage.com'>html title</a><a href='http://www.htmlpage.com'>html title</a>
<a href='http://www.htmlpage.com'>html title</a>    <a href='http://www.htmlpage.com'>html title</a>
<a href='http://www.htmlpage.com'>html title</a> wejwelfj <a href='http://www.htmlpage.com'>http://www.htmlpage.com</a>

文字列を 3 回渡すことで問題なく機能する非常に長い関数がありますが、この文字列を正常に解析できません。

[This](http://i.imgur.com/iIlhrEu.jpg) one got me crying first, then once the floodgates were opened [this](http://i.imgur.com/IwSNFVD.jpg) one did it again and [this](http://i.imgur.com/hxIwPKJ.jpg). Ugh, feels. Gotta go hug someone/something.

簡潔にするために、検索/置換関数全体ではなく、試した正規表現を投稿します。

var matchArray2 = inString.match(/\[.*\]\(.*\)/g);

for matching 、 が一致する[*](*)ため機能しません[]()[]()

ほんとに、そうなんでしょうね。その一致を確認したら、その一致を検索して ( ) と [ ] を検索し、リンクを解析してリンク テキストを抽出し、href タグを作成します。単純なハイパーリンクを見つけるために 2 回目のパスを実行するときに一致しないように、一時文字列から一致を削除します。

var plainLinkArray = tempString2.match(/http\S*:\/\/\S*/g);

私は正規表現でhtmlを解析していません。文字列を解析してhtmlを出力しようとしています。

編集：事後に3番目のリンクhttp://i.imgur.com/OgQ9Uaf.jpgを解析するという要件を追加しました。

私の最終的な解決策（@Cerbrusの回答に基づく）：

function parseAndHandleHyperlinks(inString)
{
    var result = inString.replace(/\[(.+?)\]\((https?:\/\/.+?)\)/g, '<a href="$2">$1</a>');
    return result.replace(/(?: |^)(https?\:\/\/[a-zA-Z0-9/.(]+)/g, ' <a href="$1">$1</a>');     
}
4

3 に答える 3

7

この正規表現を試してください：

/\[(.+?)\]\((https?:\/\/[a-zA-Z0-9/.(]+?)\)/g

var s = "[html title](http://www.htmlpage.com)[html title](http://www.htmlpage.com)\n\
[html title](http://www.htmlpage.com)   [html title](http://www.htmlpage.com)\n\
[html title](http://www.htmlpage.com) wejwelfj http://www.htmlpage.com";

s.replace(/\[(.+?)\]\((https?:\/\/[a-zA-Z0-9/.(]+?)\)/g, '<a href="$2">$1</a>');

正規表現の説明:

# /                   - Regex Start
# \[                  - a `[` character (escaped)
# (.+?)               - Followed by any amount of words, grouped, non-greedy, so it won't match past:
# \]                  - a `]` character (escaped)
# \(                  - Followed by a `(` character (escaped)
# (https?:\/\/
#   [a-zA-Z0-9/.(]+?) - Followed by a string that starts with `http://` or `https://`
# \)                  - Followed by a `)` character (escaped)
# /g                  - End of the regex, search globally.

の 2 つの文字列() / []がキャプチャされ、次の文字列に配置されます。

'<a href="$2">$1</a>';

これは、「問題のある」文字列に対して機能します。

var s = "[This](http://i.imgur.com/iIlhrEu.jpg) one got me crying first, then once the floodgates were opened [this](http://i.imgur.com/IwSNFVD.jpg) one did it again and [this](http://i.imgur.com/hxIwPKJ.jpg). Ugh, feels. Gotta go hug someone/something."
s.replace(/\[(.+?)\]\((https?:\/\/[a-zA-Z0-9/.(]+?)\)/g, '<a href="$2">$1</a>')

// Result:

'<a href="http://i.imgur.com/iIlhrEu.jpg">This</a> one got me crying first, then once the floodgates were opened <a href="http://i.imgur.com/IwSNFVD.jpg">this</a> one did it again and <a href="http://i.imgur.com/hxIwPKJ.jpg">this</a>. Ugh, feels. Gotta go hug someone/something.'

「正しくない」入力を使用したその他の例:

var s = "[Th][][is](http://x.com)\n\
    [this](http://x(.com)\n\
    [this](http://x).com)"
s.replace(/\[(.+?)\]\((https?:\/\/[a-zA-Z0-9/.(]+?)\)/g, '<a href="$2">$1</a>')

//   "<a href="http://x.com">Th][][is</a>
//    <a href="http://x(.com">this</a>
//    <a href="http://x">this</a>.com)"

ユーザーがそこで URL を停止するつもりだったかどうかを知る方法がないため、最後の行が壊れていると本当に非難することはできません。

ルーズ URL をキャッチするには、次を追加します。

.replace(/(?: |^)(https?\:\/\/[a-zA-Z0-9/.(]+)/g, ' <a href="$1">$1</a>');

このビットはまたは文字を(?: |^)キャッチするため、url で始まる行にも一致します。String startspace

于 2013-01-30T08:02:39.563 に答える
5 
str.replace(/\[(.*?)\]\((.*?)\)/gi, '<a href="$2">$1</a>');

これは、文字列に間違った括弧や URL に括弧がないことを前提としています。

それで：

str.replace(/(\s|^)(https?:\/\/.*?)(?=\s|$)/gi, '$1<a href="$2">$2</a>')

これは、" がすぐ前に付いていない "http" のような URL に一致します (これは、以前の置換によって追加されたものです)。もちろん、より良い表現がある場合は自由に使用してください。

編集: JSに後読み構文がないことに気づかなかったため、回答を編集しました。代わりに、式が任意のスペースまたは行頭に一致してプレーンhttpリンクに一致することがわかります。キャプチャされたスペースは元に戻す必要があります (したがって$1)。次のスペース (または式の最後) までのすべてが確実にキャプチャされるように、最後の先読みが行われます。スペースが適切な境界ではない場合は、より良い境界を考え出す必要があります。

于 2013-01-30T08:02:19.113 に答える
3

Markdown構文をHTMLに変換しようとしているようです。Markdown 構文にはまだ仕様 (振る舞いの仕様ではなく、文法のことを指しています) がありません。車輪を再発明しながら。自分でコーディングするのではなく、既存の実装を使用することをお勧めします。たとえば、Pagedownは、現在 StackOverflow で使用されている Markdown の JS 実装です。

それでも正規表現ソリューションが必要な場合は、以下が私の試みです。あなたが進歩するにつれて、それがMarkdownの他の機能でうまくいくかどうかはわかりません（もしそうなら）。

/\[((?:[^\[\]\\]|\\.)+)\]\((https?:\/\/(?:[-A-Z0-9+&@#\/%=~_|\[\]](?= *\))|[-A-Z0-9+&@#\/%?=~_|\[\]!:,.;](?! *\))|\([-A-Z0-9+&@#\/%?=~_|\[\]!:,.;(]*\))+) *\)/i

[description](url)上記の正規表現は、リンクのスタイル (タイトルはサポートされていません)の Pagedown の動作の一部をキャプチャする必要があります (すべてをキャプチャする自信はありません。Pagedown のソース コードは複雑すぎて一度に読むことができません)。上記の正規表現は、Pagedown ソース コードで使用されている 2 つの異なる正規表現から混合されています。

いくつかの機能:

  • キャプチャ グループ 1 にはテキストが含まれ[]、キャプチャ グループ 2 には URL が含まれます。
  • を使用して、テキスト部分[の]内部でエスケープできるようにします。ただし、少し余分な処理を行う必要があります。[]\[a\[1\]](http://link.com)
  • ()次のような場合に非常に便利な、1 レベルの内部リンクを許可します。[String.valueOf](http://docs.oracle.com/javase/6/docs/api/java/lang/String.html#valueOf(double))
  • リンクの後と).

この正規表現の裸のリンクは考慮していません。

参照：

于 2013-01-30T12:28:32.110 に答える