JavaScript正則表達式

我有一些DOM節點：JavaScript正則表達式

<p>[CROP:1049,160x608,557x897] [CROP:1055,264x501,513x461] Some text</p>

我創建的正則表達式：

var re = new RegExp("\[CROP:(\d+),(\d+)x(\d+),(\d+)x(\d+)\]", "ig");

但我怎麼能得到每個(\d)值？
其結果是，我需要更換每個[CROP:xxx]到<a>節點是這樣的：

<a href="#" class="myclass" data-id="1049" data-x1="160" data-x2="608" data-x3="557" data-x4="897">&nbsp;</a>

如何能不能做到？謝謝。

來源

2011-06-10 Lari13

你要做的這2個步驟，我認爲沒有功能一步到位做到這一點：

匹配所有的[CROP：...]塊
符合他們的內部零件

它應該是這樣的：

function regex_func(pattern,text) { 
    var i, max, sub = [], 
     re = new RegExp(pattern, "ig"), 
     match = text.match(re); 
    if (match) 
    { 
     for (i=0, max=match.length; i<max; i++) 
     { 
      re = new RegExp(pattern, "i"); 
      sub[i] = re.exec(match[i]);  
     } 
    } 
    return sub; 
} 

var text = "[CROP:1049,160x608,557x897] [CROP:1055,264x501,513x461] Some text", 
    pattern = "\\[CROP:(\\d+),(\\d+)x(\\d+),(\\d+)x(\\d+)\\]"; 
    matches = regex_func(pattern,text); 

for (var i=0, max=matches.length; i<max; i++) { 
    html = '<a href="#" class="myclass" data-id="'+matches[i][1]+'" data-x1="'+matches[i][2]+'" data-x2="'+matches[i][3]+'" data-x3="'+matches[i][4]+'" data-x4="'+matches[i][5]+'">'+matches[i][0]+'</a>'; 
    text = text.replace(matches[i][0],html); 
}  

document.write(text);

你可以在這裏文字吧：http://jsfiddle.net/inti/fVQgp/5/

編輯：添加HTML字符串生成部分，和替換。

編輯2：創建了一個函數來處理這個匹配問題。在實際問題中使用它。

來源

2011-06-10 13:49:56 aorcsik

謝謝。但是，我怎樣才能將這些文本字符串替換爲''DOM節點？ – Lari13 2011-06-10 13:56:22

您可以創建一個HTML字符串，並將其放在您想要的頁面中。（修改我的答案。） – aorcsik 2011-06-10 14:00:36

是的，我創建了具有所有屬性的新標籤''。但是我怎樣才能將每個'[CROP：xxx]'替換爲相應的''？ – Lari13 2011-06-10 14:02:16

你可以做var mymatch = re.exec（「mystring」）。結果變量將保存捕獲括號所匹配的文本。

編輯：抱歉，mymatch [0]包含匹配的字符串，mymatch [1]由第一組parenthses的匹配的文本等

來源

2011-06-10 13:29:13 tomconte

所以這在他的情況下如何工作，他有多個捕獲？ – CodingGorilla 2011-06-10 13:31:17

從ECMA規格：

15.10。 6.2 RegExp.prototype.exec（字符串）對正則表達式執行字符串的正則表達式匹配，並返回包含匹配結果的Array對象;如果字符串不匹配，則返回null。

例如， match_data = re.exec（str）

然後match_data [1]，...將在parens中包含每個值。

來源

2011-06-10 13:33:52 pedz

var paragraphs = document.getElementsByTagName('p'); 
for (var p = 0; p < paragraphs.length; p++){ 
    var matches = paragraphs[p].innerHTML.match(/\[CROP:(\d+),(\d+)x(\d+),(\d+)x(\d+)\]/ig); 
    console.log('matches: ' + matches.length + ' found. (' + matches.join(';') + ')'); 
    for (var m = 0; m < matches.length; m++){ 
     var data = /\[CROP:(\d+),(\d+)x(\d+),(\d+)x(\d+)\]/i.exec(matches[m]); 
     console.log('data: ' + data + ' (' + data.length + ')'); 

     var a = document.createElement('a'); 
     a.href = '#'; 
     a.className = 'myclass'; 
     var attr = ['id','x1','x2','x3','x4']; 
     for (var at = 0; at < attr.length; at++){ 
      a.setAttribute('data-'+attr[at],data[at+1]); 
     } 
     a.innerHTML = data.toString(); 

     document.getElementsByTagName('body')[0].appendChild(a); 
    } 
}

這樣的事情？使用<regex>.exec(<target>)來獲得匹配，然後您可以使用setAttribute將數據追加到對象。

Demo

來源

2011-06-10 13:39:44

下面會做你在找什麼

http://jsfiddle.net/Eb6b7/2/

我無法這樣使用一個正則表達式做的，這是從上面的鏈接的Javascript代碼：

var str = "[CROP:1,20x30,40x50] [CROP:9,8x00,400x500] [CROP:10,201x301,401x501] [CROP:100,21x31,41x51] some text"; 
var re1 = new RegExp(/\[CROP:(\d+),(\d+)x(\d+),(\d+)x(\d+)\]/ig); 
var re2 = new RegExp(/\[CROP:(\d+),(\d+)x(\d+),(\d+)x(\d+)\]/); 
var data1 = str.match(re1); 
var data2 = str.match(re2); 

// Example of RegEx 1 
for(var i = 0; i < data1.length; i++) 
    $('#parsed_content1').append("<div>" +data1[i] + "</div>"); 

// Example of RegEx 2 
for(var i = 0; i < data2.length; i++) 
    $('#parsed_content2').append("<div>" +data2[i] + "</div>"); 

// What you are looking for 
for(var i = 0; i < data1.length; i++){ 
    var data3 = data1[i].match(re2); 
    for(var j = 0; j < data3.length; j++) 
    $('#overall').append("<div>" +data3[j] + "</div>"); 

}

來源

2011-06-10 14:02:28 Colin

JavaScript正則表達式

回答

相關問題