Как создать собственные теги как в wiki?

Question

[WayMax]

Перечитал уже кучу статей о регулярных выражениях и все равно не могу понять :(
Примеры или совсем не в тему или слишком простые.

Как, например, сделать замену чего-то вроде: <<текст1|текст2>> или [[текст1|текст2]] или {{текст1|текст2}} на
<div><span>текст1</span><span>текст2</span></div>

Понято что

text.replace(regex, '<div><span>$1</span><span>$2</span></div>');

Понятно как получить $1 для простого регулярного выражения. Но как получить $2 для такого вида тегов?

Answer 1

[Алексей Уколов]

<<([^|]+)\|([^>]+)>>
https://regex101.com/r/K1Loae/1

\[\[([^|]+)\|([^]]+)\]\]
https://regex101.com/r/TqdqUe/1

На regex101 справа есть панель Explanations, в которой объясняется каждый элемент регулярного выражения.

Comments

[WayMax]

Спасибо.

[WayMax]

Но так всеравно не работает

var regex = /\[\[([^|]+)\|([^]]+)\]\]/g;
var out = text.replace(regex, '<span style="background-color:red;">$1</span><span style="background-color:green;">$2</span>');

[Алексей Уколов]

В js нужно и внутренности групп экранировать, оказывается: /\[\[([^\|]+)\|([^\]]+)\]\]/
А вообще, можно упростить выражение: /\[\[(.+?)\|(.+?)\]\]/

[WayMax]

Алексей Уколов, Спасибо.