Is it possible to move substrings to a specific location with RegEx?

Question

Background: I used quill.js to get some rich text input. The result I want is quite similar to HTML so I went with the quill.container.firstChild.innerHTML approach instead of actually serializing the data. But when it comes to anchor, instead of

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

I actually want

Anchor{{link:test.html}}

With .replace() method I easily got {{link:test.html}}Anchor</a> but I need to put the link description after the Anchor text. Is there a way to swap {{link:test.html}} with the next </a> so I can get the desired result? There can be multiple anchors in the string, like:

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

I would like it to become:

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

charlietfl · Answer 1 · 2019-04-06T13:48:43.253

4

You could also use dom methods. The dom is a better html parser than regex. This is a fairly simple 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)

edited Apr 06 '19 at 13:48

answered Apr 06 '19 at 13:41

charlietfl

169,044
13
113
146

If you're on a browser or otherwise have a DOM parser available, this is the way to go in my book. – T.J. Crowder Apr 06 '19 at 13:44
That's a very clever approach! Though it seems that in my case T.J. Crowder's solution is simpler, many thanks for widening my horizons. – Agustín Dorado Apr 06 '19 at 13:45
@T.J.Crowder right...I think OP's quill is a WYSIWYG editor – charlietfl Apr 06 '19 at 13:46
@AgustínDorado- FWIW, this is much more robust than the regex solution. :-) – T.J. Crowder Apr 06 '19 at 13:46

T.J. Crowder · Accepted Answer · 2019-04-06T13:45:37.383

Yes, you can use capture groups and placeholders in the replacement string, provided it really is in exactly the format you've shown:

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

This is very fragile, which is why famously you don't use regular expressions to parse HTML. For instance, it would fail with this input string:

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

...because of the <span>blah</span>.

But if the format is as simple and consistent as you appear to be getting from quill.js, you can apply a regular expression to it.

That said, if you're doing this on a browser or otherwise have a DOM parser available to you, use the DOM as charlietfl demonstrates;

This is splendid! I oversimplified only a wee little bit but `str.replace(/([^/g, "$2{{link:$1}}")` clearly did the trick. Eternally grateful! — Agustín Dorado, Apr 06 '19 at 13:42

Is it possible to move substrings to a specific location with RegEx?

2 Answers2