Question

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

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

我真的想要

Anchor{{link:test.html}}

使用.replace（）方法，我很容易得到{{link:test.html}}Anchor</a>，但需要将链接描述放在Anchor文本之后。有没有一种方法可以将{{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是比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)

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);

非常非常脆弱，这就是您don't use regular expressions to parse 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 demonstrates;

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

2 个答案: