StackOverflow樣式的JavaScript正則表達式類型的圖像標籤？

我想模仿處理圖像的Stackoverflow方式的風格。所以，如果在我把包括圖像描述的標籤的文本圖像和圖像的UUID：StackOverflow樣式的JavaScript正則表達式類型的圖像標籤？

![image description][3f5e7278-425d-4e75-9beb-59b6770b46a7]

使用JavaScript我現在想取一段文字，讓這個標籤的所有出現，獲取圖片描述和uuid，並用適當的<img標籤替換標籤，以便我可以將它們加載到我的Backbone視圖中。儘管如此，我還是喜歡用正則表達式的noob。所以我開始與此：

var text = 'First some normal text ![image description][3f5e7278-425d-4e75-9beb-59b6770b46a7] and some more text here. And yet another image tag here: ![other img descript.][41f4fd84-0489-4d7a-8923-24d472008655]'; 
var re = new RegExp('[!\[.*\]\[.+\]]'); 
var m = re.exec(text); 
if (m == null) { 
    alert(text); 
} else { 
    alert('found some occurrences, but what to do with it?'); 
}

所以我做了我的第一次嘗試在正則表達式，這似乎不正確。其次，我真的不知道如何使用它來獲取圖像描述和uuid。

任何人都可以幫助我與正則表達式和如何從他們的圖像描述和uuid？歡迎所有提示！

[編輯] 感謝@Teneff的回答，我現在做出如下所示的內容。不幸的是，這不起作用，因爲它總是提醒空。任何想法我在這裏做錯了嗎？

function imgTagToHtmlTag(text) { 
    var re = /!\[([^\]]+)\]\[([^\]]+)\]/g; 
    var m; 

    while ((m = re.exec(text)) != null) { 
     if (m.index === re.lastIndex) { 
      re.lastIndex++; 
     } 
    } 
    alert(m); 
    // View your result using the m-variable. 
    // eg m[0] etc. 
} 

var text = 'First some normal text ![image description][3f5e7278-425d-4e75-9beb-59b6770b46a7] and some more text here. And yet another image tag here: ![other img descript.][41f4fd84-0489-4d7a-8923-24d472008655]'; 
imgTagToHtmlTag(text);

http://jsfiddle.net/ASJT6/

來源

2014-06-17 kramer65

您可以尋找到[降價]（HTTP有趣：// daringfireball .NET /項目/降價/語法＃IMG）。我相信SO使用這個，或者至少基於它...它可能不會直接解決你的問題，但它可能是有用的有一個閱讀 – musefan

SO使用[PageDown]（http://code.google.com/p /下頁/維基/下頁）。 –

@IsaacKleinman：很高興知道，謝謝 – musefan

你可以這樣搭配吧：

var re = /!\[([^\]]+)\]\[([^\]]+)\]/g;

這裏是一個example

編輯：second example與全球改性劑

編輯2：如果我們想想UUID作爲圖像源，你可以取代它是這樣的：

var text_modifited = text.replace(re, '<img src="$2" alt="$1" />')

jsFiddle example

來源

2014-06-17 13:48:44 Teneff

我認爲你必須使用全局的「g」修飾符來獲得所有匹配？ – John

@John +1 ... true，true :) – Teneff

@Teneff - 感謝您的建議。在你提供的工作例子中，似乎確實起作用。我現在試圖把它放在一些Javascript代碼中，但我無法得到它的工作。我將我的代碼添加到最初的問題。任何想法我在那裏做錯了嗎？ – kramer65

StackOverflow樣式的JavaScript正則表達式類型的圖像標籤？

回答

相關問題