如果它不是以javascript中的模式開頭，則僅匹配正則表達式

Question

我在這里有點奇怪，我基本上有一大塊文本，可能包含也可能不包含圖像鏈接。

所以我要說它有一個模式可以很好地提取圖像url，但是一旦找到匹配項，就會將其替換為鏈接為src的元素。 現在的問題是文本中可能存在多個匹配，這就是它變得棘手的地方。 由於url模式現在將匹配src標記url，這基本上只會進入無限循環。

那么有沒有辦法只在正則表達式中匹配，如果它不是以類似="|=' ？的模式開始的話，那么它將匹配url，如：

some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6

但不是

some image <img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6">

我不確定是否有可能，但是如果有可能有人指出我正確的方向？ 在這種情況下，替換本身是不夠的，因為匹配的url也需要在其他地方使用，因此它需要像捕獲一樣使用。

我需要考慮的主要方案是：

• 在一個不同文本塊中的許多鏈接
• 單個鏈接，沒有任何其他文本
• 與其他不同文本的單一鏈接

==編輯==

這是我用來匹配網址的當前正則表達式：

(\\b(https?|ftp|file):\\/\\/[-A-Z0-9+&@#\\/%?=~_|!:,.;]*(?:png|jpeg|jpg|gif|bmp))

==編輯2 ==

所以每個人都明白為什么我不能在這里使用/ g命令是一個解釋問題的答案，如果我可以使用這個/ g像我最初嘗試那么它會使事情變得更簡單。

Javascript正則表達式多次捕獲

Answer 1

你正在尋找的是一個負面的背后，但Javascript不支持任何類型的外觀，所以你要么必須使用回調函數來檢查匹配的內容，並確保它沒有前面的'或" ，或者您可以使用以下正則表達式：

(?:^|[^"'])(\b(https?|ftp|file):\/\/[-a-zA-Z0-9+&@#\/%?=~_|!:,.;]*(?:png|jpeg|jpg|gif|bmp))

這有一個問題，就是在成功匹配的情況下，它會捕獲另一個字符，一個在輸入中的(\\b(https?|ftp|file)模式之前，但我認為你可以處理這很容易。

Regex101演示

Answer 2

在最后使用/ig命令應該有效...... g用於全局替換，而i用於不區分大小寫，這是必要的，因為你只有AZ而不是a-zA-Z 。

使用以下vanilla JS似乎對我有用（參見jsfiddle） ......

var test="some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6 some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6 some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6";
var re = new RegExp(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*(?:png|jpeg|jpg|gif|bmp))/ig);
document.getElementById("output").innerHTML = test.replace(re,"<img src=\"$1\"/>");

雖然它突出顯示的是URL的查詢字符串部分（ ?v=6未被您的RegEx選中）。

對於jQuery，它將是（見jsfiddle） ...

$(document).ready(function(){
  var test="some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6 some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6 some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6";
  var re = new RegExp(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*(?:png|jpeg|jpg|gif|bmp))/ig);
  $("#output").html(test.replace(re,"<img src=\"$1\"/>"));
});

---

更新

以防我在示例中使用相同圖片網址的示例無法說服您 - 它也適用於不同的網址... 請參閱此jsfiddle更新

var test="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6 http://cdn.sstatic.net/serverfault/img/sprites.png?v=7";
var re = new RegExp(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*(?:png|jpeg|jpg|gif|bmp))/ig);
document.getElementById("output").innerHTML = test.replace(re,"<img src=\"$1\"/>");

Answer 3

難道你不能只看到網址前面是否有空格，而不是那個字邊界？ 似乎工作，雖然你將不得不刪除匹配的空格。

(\s(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*(?:png|jpeg|jpg|gif|bmp))

http://rubular.com/r/9wSc0HNWas

編輯：該死，太慢:)我仍然會留在這里，因為我的正則表達式更短;）

Answer 4

正如freefaller所說，如果exec不是必須的話，你可以使用/g標志一次性找到所有匹配。

否則：你可以在你的正則表達式的開頭添加(="|=')?並檢查$ 1是否undefined 。如果未定義，那么它不會以="|='模式啟動