What is the right way to search and replace HTML words

Question

I am redoing a brief text editor in the browser. I am using an editable div that contains the following:

<div id="content" class="content_editor" contenteditable="true" onpaste="limpar_formatacao()">
<p>
O meu texto tema a palavra nascer e nascer e também nasceram.
</p> 
<p>
Lorem Ipsum não é simplesmente um texto randômico mas tem nascer no meio.
</p>
</div>

I need a function to fix text by tagging <mark> all words repeated of a sentence. To look at it this way: (for example, all occurrences of the word 'born')

<p>
O meu texto tema a palavra <mark>nascer</mark> e <mark>nascer</mark> e também nasceram.
</p>
<p>
Lorem Ipsum não é simplesmente um texto randômico mas tem nascer no meio. Uma última frase.
</p>

Considerations:

• Note that the phrase that does not have repeated word (i.e., appear only once), is not marked!
• Can’t get by <p> because the separation is by sentence, not by paragraph.

So I did a function to:

• get all the text
• create an array of phrases:

var textEditor = $("#content").text();
var frases = textEditor.match(/(?! )(.*?(\b\w\w\.))*.*?[.?!](?![.?!])/g);

• started single, non-repeated word array
• separated by word
• a p/ each word loop
  • if greater than 3 letters
  • checks if it exists in the array
    • if not: adds
    • if yes: mark with the two words

It didn’t look elegant but this whole function was like this:

    // ------- algoritmo para repeticao_palavra ------- //
    var textEditor = $("#content").text();
    //separar por frase
    var frases = textEditor.match(/(?! )(.*?(\b\w\w\.))*.*?[.?!](?![.?!])/g);


  frases.forEach((frase) => {
        frase = frase.trimStart(); // limpar o começo de cada frase
        frase = cleanPunctuation(frase); limpar pontuação para não interferir na comparação
        
        var palavras_unicas = []; //iniciar array palavras unicas, não-repetidas
        var palavras = frase.split(' '); //separar por palavra

        //laço p/ cada palavra:
        palavras.forEach((palavra) => {
            palavra = palavra.toLowerCase();
            
            if (palavra.length > 3) { // se maior que 3 letras
                //verificar se existe no array
                if (palavras_unicas.indexOf(palavra) === -1) { //se não: adiciona
                    palavras_unicas.push(palavra);
                }
                else {
                    frase = marcar_palavra_repetida(frase, palavra) //se sim: colocar a tag <mark>
                }
            }
        })
    });

The function is marcar_palavra_repetida() and stayed like this

function marcar_palavra_repetida(frase, palavra) {

    let str = document.getElementById("content").innerHTML;
    var fraseHTML = frase.replaceAll(palavra, '<mark>' + palavra + '</mark>');

    document.getElementById("content").innerHTML = str.replace(frase, fraseHTML);

    return str.replace(frase, fraseHTML); // esse return cria uma recursividade que marca se houver mais de uma palavra repetida na mesma frase
}

How best to mark an html word and tag it with tags <mark>?

• I have already advised against the use of regex, so I am reading about it and considering even though the separation in sentences is with regex.
• Function marks correctly with tag <mark> but it takes all occurrences that have 'birth' (as an example). Including derivatives or plural.

It marks that:

<p>
Uma frase com a palavra <mark>nascer</mark> e <mark>nascer</mark> de novo, mas pega também <mark>nascer</mark>am e <mark>nascer</mark>ão na mesma frase.
</p>