Можно ли переместить подстроки в определенное место с помощью RegEx?

Question

Справочная информация: я использовал quill.js для ввода расширенного текста. Результат, который я хочу, очень похож на HTML, поэтому я выбрал подход quill.container.firstChild.innerHTML вместо фактической сериализации данных. Но когда дело доходит до якоря, вместо

<a href="test.html">Anchor</a>

Я действительно хочу

Anchor{{link:test.html}}

С помощью метода .replace () я легко получил {{link:test.html}}Anchor</a>, но мне нужно поместить описание ссылки после текста привязки. Есть ли способ поменять {{link:test.html}} на следующий </a>, чтобы я мог получить желаемый результат? В строке может быть несколько якорей, например:

str = 'This is a <a href="test1.html">test</a>. And <a href="test2.html">another one</a> here.'

Я бы хотел, чтобы он стал:

str = 'This is a test{{link:test1.html}}. And another one{{link:test2.html}} here.'

Answer 1

Вы также можете использовать методы DOM. DOM является лучшим анализатором HTML, чем регулярное выражение. Это довольно просто replaceWith

str = 'This is a <a href="test1.html">test</a>. And <a href="test2.html">another one</a> here.'

var div = document.createElement('div');
div.innerHTML = str;
div.querySelectorAll('a').forEach(a=>{
    a.replaceWith(`${a.textContent}{{link:${a.getAttribute('href')}}}`)
})

console.log(div.innerHTML)

Answer 2

Да, вы можете использовать группы захвата и заполнители в строке замены, при условии, что это действительно именно тот формат, который вы показали:

const str = 'This is a <a href="test1.html">test</a>. And <a href="test2.html">another one</a> here.';
const result = str.replace(/<a href="([^"]+)">([^<]+)<\/a>/g, "$2{{link:$1}}");
console.log(result);

Это очень хрупкий файл, поэтому, как известно, вы не используете регулярные выражения для разбора HTML .Например, произойдет сбой с этой входной строкой:

const str = 'This is a <a href="test1.html">test <span>blah</span></a>. And <a href="test2.html">another one</a> here.';

... из-за <span>blah</span>.

Но если формат такой же простой и последовательный, как кажетсяполучая из quill.js, вы можете применить к нему регулярное выражение.

Тем не менее, если вы делаете это в браузере или у вас есть доступный анализатор DOM, используйте DOM как charlietfl демонстрирует ;