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>
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)p
em várias frases, mas a ideia básica é essa (verificar se a palavra ocorre 2 ou mais vezes na frase).