JQuery: как использовать регулярные выражения, чтобы обернуть подстроку HTML-разметки и вставить переменную?

Question

Я пытаюсь

1. найти подстроки, которые соответствуют выражению ((моя подстрока))
2. обернуть результаты разметкой и
3. вводить разные переменные для разных результатов.

Работает для одной подстроки:

var link1 = "URL_1",
    myRegex = /(\(\(.*\)\))/g,
    myOldString = "lorem ((ipsum dolor)) sit amet consectur";

var myNewString = myOldString.replace(myRegex, "<a href='"+link1+"' class='red'>$1</a>");
$('.mytext').html(myNewString);

.red {
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 class="mytext"></h2>

Но я не могу заставить его работать с несколькими результатами:

var link1 = "URL_1",
    link2 = "URL_2",
    myRegex = /(\(\(.*\)\))/g,
    myOldString = "lorem ((ipsum dolor)) sit ((amet)) consectur";

var myNewString = myOldString.replace(myRegex, "<a href='"+link1+"' class='red'>$1</a>", "<a href='"+link2+"' class='red'>$2</a>");


$('.mytext').html(myNewString);

Есть подсказка?

Answer 1

• Ваша запятая между выходными строками прерывает замену
• Совпадение не возвращает $ 1 и $ 2, а $ 1 дважды - если вы хотите все сразу, используйте .exec и цикл while, но я рекомендую вместо этого использовать функцию
• Вы также должны сделать RegEx ленивым с? или он будет совпадать с ((до конца второго))

var urls=["URL1","URL2"],cnt=0;
  myRegex = /(\(\(.*?\)\))/g,
  myOldString = "lorem ((ipsum dolor)) sit ((amet)) consectur";

var myNewString = myOldString.replace(myRegex, 
  function(str) { return "<a href='" + urls[cnt++] + "' class='red'>"+str+"</a>" });


$('.mytext').html(myNewString);

.red {
  color: red; text-decoration:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 class="mytext"></h2>