3

Estou refazendo um breve editor de texto no browser. Estou usando uma div editável que contém o seguinte:

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

Eu preciso de uma função para corrigir o texto marcando com tag <mark> todas as palavras repetidas de uma frase. Para ficar assim: (por exemplo, todas as ocorrências da palavra 'nascer')

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

Considerações:

  • Reparem que a frase que não possuir palavra repetida (ou seja, aparecer uma única vez), não é marcada!
  • Não dá para pegar por <p> porque a separação é por frase, e não por paragrafo.

Então eu fiz uma função para:

  • pegar todo o texto
  • criar um array de frases:
var textEditor = $("#content").text();
var frases = textEditor.match(/(?! )(.*?(\b\w\w\.))*.*?[.?!](?![.?!])/g);
  • iniciei array palavras unicas, não-repetidas
  • separei por palavra
  • um laço p/ cada palavra
    • se maior que 3 letras
    • verifica se existe no array
      • se não: adiciona
      • se sim: marca com o as duas palavras

Não ficou elegante mas essa função toda ficou assim:

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


A função é marcar_palavra_repetida() e ficou assim

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
}

Qual a melhor forma de marcar uma palavra em html e marca-la com tags <mark>?

  • Já me desaconselharam o uso de regex, portanto estou lendo a respeito e considerando apesar da separação em frases estar com regex.
  • A função marca corretamente com a tag <mark> mas ela pega todas as ocorrências que possuam 'nascer' (como exemplo). Inclusive derivadas ou plural.

ELe marca isso:

<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>
11
  • quando eu fiz a pergunta eu achei que tinha o minimo verificavel e a lógica do que estou fazendo. já li a política de uso, como usar e por diversas vezes continuo não perguntando direito para a comunidade stackoverflow. Commented 31/08/2021 às 20:50
  • sim, claro! Editei a pergunta e tentei ser mais correto nas colocações. E sim, a tag mark sofre com adição/retirada de classes e até um a href... Commented 31/08/2021 às 21:28
  • Não daria pra adaptar a solução daqui? Basta incluir uma verificação a mais: se o match retorna mais de uma ocorrência vc faz a substituição (desculpe, não parei pra ver mais detalhes da pergunta, mas em uma olhada rápida me parece quase o mesmo problema)
    – hkotsubo
    Commented 31/08/2021 às 21:54
  • Seria isso: jsfiddle.net/9j3x7fug/1 ? Claro que falta separar um p em várias frases, mas a ideia básica é essa (verificar se a palavra ocorre 2 ou mais vezes na frase).
    – hkotsubo
    Commented 1/09/2021 às 1:25
  • @LukeNegreiros, acho que agora eu entendi a pergunta. A expressão regular é aplicada ao texto dentro de cada parágrafo, havia entendido que seria aplicada um regex para analisar a div toda. Antes de eu publicar uma resposta de uma conferida para ver se esse código soluciona o problema: jsfiddle.net/ez9yj1ok cc>>@hkotsubo Commented 1/09/2021 às 12:15

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .