javascript - 是否可以使用 RegEx 将子字符串移动到特定位置？

Question

背景:我使用 quill.js 来获取一些富文本输入。我想要的结果与 HTML 非常相似，所以我选择了 quill.container.firstChild.innerHTML方法而不是实际序列化数据。但是说到 anchor ，而不是

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

我真的很想

Anchor{{link:test.html}}

使用 .replace() 方法我很容易得到 {{link:test.html}}Anchor</a>但我需要将链接描述放在 anchor 文本之后。有没有办法交换 {{link:test.html}}与下</a>这样我就能得到想要的结果？字符串中可以有多个 anchor ，例如:

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 是比 regex 更好的 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)