Использование Match в JQuery возвращает только одно значение

Question

Я пытаюсь использовать «Матч» для фильтрации некоторых значений в моем текстовом поле, но мой код работает только для первой строки, возвращая только «one.png; 1».

Мне нужно получить все значения в "text2" DIV, как: "one.png; 1/two.png; 2/three.png; 3"

$(document).ready(function() { 
 

 
    var dataimg = $('#text').text().match('url_image="(.*)";'); 
 
    var datasub = $('#text').text().match('sub=(.*);'); 
 

 
    $("#text2").append(dataimg[1]).append(";").append(datasub[1]); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="text"> 
 

 
    url_image="one.png"; sub=1; url_image="two.png"; sub=2; url_image="three.png"; sub=3; 
 

 
</div> 
 

 
<div id="text2"></div>

Кто-нибудь здесь, кто может мне помочь? Благодаря!

Answer 1

Если вы просто пытаетесь обновить форматирование текста, то вы можете использовать глобальную замену, такие как:

/url_image="([^"]+)"; sub=(.*);/g 

И заменить матчи с '$1;$2':

$('#text2').text(function() { 
 
    return $('#text').text().replace(/url_image="([^"]+)"; sub=(.*);/g, '$1;$2'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="text" style="display: none"> 
 
url_image="one.png"; sub=1; 
 
url_image="two.png"; sub=2; 
 
url_image="three.png"; sub=3; 
 
</div> 
 

 
<div id="text2"></div>

---

Конечно, y НУ может также использовать глобальный g флаг с .match() method, но если вы хотите, чтобы восстановить все захваченные группы, вы должны использовать .exec() method:

var text = $('#text').text(); 
 
var regex = /url_image="([^"]+)"; sub=(.*);/g; 
 
var updatedText = ''; 
 
var match; 
 

 
while ((match = regex.exec(text)) !== null) { 
 
    if (match.index === regex.lastIndex) { 
 
     regex.lastIndex++; 
 
    } 
 
    
 
    updatedText += match[1] + ';' + match[2];  
 
} 
 

 
$('#text2').text(updatedText);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="text" style="display: none"> 
 
url_image="one.png"; sub=1; 
 
url_image="two.png"; sub=2; 
 
url_image="three.png"; sub=3; 
 
</div> 
 

 
<div id="text2"></div>