JavaScript正则表达式

Question

我有一些DOM节点：

<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> 

如何能不能做到？谢谢。

Answer 1

你要做的这2个步骤，我认为没有功能一步到位做到这一点：

1. 匹配所有的[CROP：...]块
2. 符合他们的内部零件

它应该是这样的：

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：创建了一个函数来处理这个匹配问题。在实际问题中使用它。

Answer 2

你可以做var mymatch = re.exec（“mystring”）。结果变量将保存捕获括号所匹配的文本。

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

Answer 3

从ECMA规格：

15.10。 6.2 RegExp.prototype.exec（字符串） 对正则表达式执行字符串的正则表达式匹配，并返回包含匹配结果的Array对象;如果字符串不匹配，则返回null。

例如， match_data = re.exec（str）

然后match_data [1]，...将在parens中包含每个值。

Answer 4

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

Answer 5

下面会做你在找什么

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>"); 

}