Replace with multiple capture groups fails to recognise how to restore HTML

[ardcore]

Example: https://jsfiddle.net/zzby5zb6/1/

Actually, this isn't technically incorrect, as the replace function has no way of knowing if the intention was to put the !!! inside of the span element or outside of it.
As far as I understand, this is limited by the current design. I understand your desire to stay true to the original regexp/replace syntax, but to avoid such scenarios, maybe it would make sense to consider using capture group delimiters? Being able to express something like {$1!!!}{$2} would solve the issue.

[hftf]

How about using a replace function? https://jsfiddle.net/zzby5zb6/2/

findAndReplaceDOMText(document.querySelector("#test"), {
  find: /(hello)(world)/,
  replace: function replace(portion, match) {

    var txt = portion.text;
    if (portion.text === match[1])
      txt += '!!!';

    return document.createTextNode(txt);
  }
});

[ardcore]

This won't work when text is spread over multiple HTML elements/findAndReplaceDOMText's portions (and it is in my case, I've simplified it in the fiddle)

[hftf]

Could you post a fiddle with your unsimplified use case?

[ardcore]

https://jsfiddle.net/q1nnnzk9/ - this should be enough for a sample

[hftf]

Change the if statement to

if (portion.indexInMatch + portion.text.length ===  match[1].length)

[SaltatorMortis]

the if example above is not working if you don`t start a new node at an capture group

    var txt = portion.text;
    if (portion.indexInMatch === 0) { fired = false }
    if (portion.indexInMatch + portion.text.length >=  match[1].length && !fired) {
        console.log('dsd')
        var pt1 = txt.slice(0 , match[1].length-portion.indexInMatch)
        var pt2 = txt.slice(match[1].length-portion.indexInMatch , txt.length)
        txt = `${pt1}!!!${pt2}`;
     		fired = !fired;
    }
    return document.createTextNode(txt);

but it would be cool to have an internal
portionMode: 'insert'

[SaltatorMortis]

i suggest that we enhance the Wrap syntax with this
this would remove the need of 2 frDOM calls if you want a staggered wrap
ie:

find: /(hello)(world)(world)(hello)/,
replace: '$1!!!$2!!!$3!!!$4',
wrap: '<details open=""><summary>$1</summary>{$2}</details>{$3}<br>$4'

results in:
<details open=""><summary>hello</summary>!!!world</details>!!!world!!!<br>hello

and if you dont want add new wraps simply use $1{$2}{$3}$4