3

Tenho uma string qualquer:

"novamente mais brevemente uma vez claro, claramente demente, igualmente. novamente."

Executo um regex em JavaScript para pegar as palavras terminadas em "mente":

var target = $("#content").text();
var exp = /\w+mente/g; // regex ok
var resultado = null;

while (resultado = exp.exec(target)) {
   marcarTexto_adverbio(resultado); // função que coloca uma tag <mark> em volta
};

A variável resultado passa todos os valores perfeito. Inclusive o "novamente" duplicado no final.

Mas a função que coloca a tag <mark> não coloca no segundo "novamente", ou seja não coloca em palavras repetidas:

function marcarTexto_adverbio(target) {
    $("#content").html(function (_, html) {
        return html.replace(target, '<mark>' + target + '</mark>')
    });
}

Algum erro de lógica na execução dessa função? (já que a array do 'resultados' vai completa, com todas as palavras do regex)

2 Respostas 2

2

Primeiramente, sua regex não busca apenas palavras que terminam em "mente", mas sim qualquer palavra que tenha pelo menos um caractere antes de "mente":

let s = 'seus dementes, a mente engana frequentemente, plante sementes';
console.log(s.match(/\w+mente/g)); // [ "demente", "frequentemente", "semente" ]

Veja no exemplo acima que, apesar do texto ter as palavras "dementes" e "sementes", no resultado aparece "demente" e "semente". Ou seja, sua substituição resultaria em <mark>demente</mark>s e <mark>semente</mark>s, que não é bem o que você precisa.

Isso acontece porque a regex está pegando \w+ (uma ou mais letras, números ou _), seguido de "mente", mas esta regex por si só não garante que não possa ter outra letra depois.

Para evitar isso e só pegar as palavras que de fato terminem em "mente", use o atalho \b, que indica uma word boundary ("fronteira entre palavras", uma posição que possui um caractere alfanumérico antes e outro não-alfanumérico depois, ou vice-versa):

let s = 'seus dementes, a mente engana frequentemente, plante sementes';
console.log(s.match(/\b\w+mente\b/g)); // [ "frequentemente" ]

A palavra "mente" também não é considerada, pois \w+ diz que deve ter pelo menos um caractere antes de "mente". Mas se quiser pegar a palavra "mente" também, troque por \w*.


Outro detalhe é que você está trocando todo o HTML do elemento. Apesar de funcionar em muitos casos, nem sempre será o que você espera, pois HTML é muito mais complexo do que uma regex é capaz de lidar (veja mais sobre isso aqui).

Tomei a liberdade de adaptar o exemplo da outra resposta para ilustrar alguns problemas que podem ocorrer:

function marcarTexto_adverbio(target) {
    // mostrando o HTML no console
    $("#content").html(function (_, html) {
        let novoHTML = html.replace(new RegExp(target, "g"), '<mark>' + target + '</mark>');
        console.log(novoHTML);
        return novoHTML;
    });
}

function teste() {
  let target = $("#content").text();
  let exp = /\b\w+mente\b/g;
  let resultado = null;

  let palavrasReplace = new Map();
  while (resultado = exp.exec(target)) {
    const palavra = resultado[0];
    if (!palavrasReplace.has(palavra)) {
      marcarTexto_adverbio(palavra); // função que coloca uma tag <mark> em volta
      palavrasReplace.set(palavra, true);
    }
  };
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="content">novamente
 <a href="www.novamente.com">link</a>
 <img src="novamente.gif" alt="mostra novamente a imagem">
 <span>tem comentário aqui<!-- novamente --></span></p>

<button onclick="teste()">Mark</button>

Eu alterei a função marcarTexto_adverbio para mostrar o HTML final no console. Repare que o resultado foi:

<mark>novamente</mark>
 <a href="www.<mark>novamente</mark>.com">link</a>
 <img src="<mark>novamente</mark>.gif" alt="mostra <mark>novamente</mark> a imagem">
 <span>tem comentário aqui<!-- <mark>novamente</mark> --></span>

Ou seja, tanto o href do link, quanto o src e o alt da imagem, e até o texto que estava nos comentários, tiveram seu conteúdo indevidamente alterado.

Usar regex desta forma, sem se preocupar com a estrutura do HTML do elemento, pode levar a resultados catastróficos. A regex só vai funcionar se dentro do elemento tiver apenas textos simples (ou se uma palavra que ocorre no texto não ocorrer dentro de atributos HTML, nem em qualquer outro lugar que não seja um textContent).

A solução para isso é um pouco mais complicada, pois temos que quebrar cada textNode em vários nodes, sendo que alguns deles serão elementos mark, enquanto outros serão textNodes. Por exemplo, o texto "Aconteceu novamente hoje", que no HTML é apenas um textNode, terá que ser quebrado em 3 nodes: dois textNodes para as palavras "Aconteceu" e "hoje", e um elemento mark para "novamente". E caso tenha outra tags dentro do elemento, devo chamar a mesma função recursivamente, para que ela trate os elementos mais internos da mesma.

Ficaria algo assim:

function markWords(element) {
    let e = document.createElement('div');
    for (let child of element.childNodes) {
        if (child.nodeType == Node.TEXT_NODE) {
            child.nodeValue.split(/(\b\w+mente\b)/g).forEach(s => {
                if (! /^\w+mente$/.test(s)) {
                    e.appendChild(document.createTextNode(s));
                } else {
                    let novo = document.createElement('mark');
                    novo.appendChild(document.createTextNode(s));
                    e.appendChild(novo);
                }
            });
        } else e.appendChild(markWords(child));
    }
    element.innerHTML = e.innerHTML;
    return element;
}

function teste() {
    markWords(document.querySelector('#content'));
    // somente para mostrar o HTML gerado, pode apagar quando for usar na sua página
    console.log(document.querySelector('#content').innerHTML);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="content">novamente pois novamente o
 <a href="www.novamente.com">link</a>
 <img src="novamente.gif" alt="mostra novamente a imagem">
 <span>tem comentário aqui<!-- novamente --></span>
 <span>antigamente, sementes, demente, novamente</span> <span>e novamente</span> fim.</p>

<button onclick="teste()">Mark</button>

O resultado é o HTML correto, com somente as palavras modificadas (preservando corretamente os comentários e atributos HTML):

<mark>novamente</mark> pois <mark>novamente</mark> o
 <a href="www.novamente.com">link</a><img src="novamente.gif" alt="mostra novamente a imagem"><span>tem comentário aqui<!-- novamente --></span><span><mark>antigamente</mark>, sementes, <mark>demente</mark>, <mark>novamente</mark></span><span>e <mark>novamente</mark></span>

Um último detalhe é que o atalho \w pega letras, dígitos e o caractere _. Se quer considerar apenas letras (incluindo os acentos), veja algumas opções aqui.

2
  • eu criei um editor de texto num div com contentEditable = True portanto não terei tags dentro dele. somente texto puro. Tomei o cuidado, inclusive de incluir uma limpeza de caracteres e tags caso o usuário faça 'ctrl+v' com clipboardData.getData('text/plain'). E somente nesse div eu executo o regex,. Claro, as tags marks são inseridas/excluídas com js seguido de normalize para corrigir alguns comportamentos de textNode que surgiram. Commented 11/04/2020 às 0:11
  • @LukeNegreiros Tudo bem, de qualquer forma, as respostas do Stack Overflow em Português devem servir também para qualquer pessoa que visite o site futuramente, por isso achei interessante mostrar um caso mais geral, pois regex + HTML pode ser uma combinação perigosa se o cenário não for restringido (como é o seu caso)
    – hkotsubo
    Commented 11/04/2020 às 0:48
1

Existe um problema, o replace está efetuando apenas uma substituição da maneira que está sendo utilizado, ao encontrar a primeira ocorrência ele substitui e acabou... Como você tem duas palavras iguais, ele substitui exatamente a mesma palavra duas vezes.

Se você inspecionar o HTML verá que a palavra novamente está dentro de duas tags mark.


Você pode trabalhar com o replace utilizando regex e a flag g, com isso a substituição será efetuada em todas as palavras encontradas.

Sua função marcarTexto_adverbio ficaria mais ou menos da seguinte maneira.

function marcarTexto_adverbio(target) {
    $("#content").html(function (_, html) {
        return html.replace(new RegExp(target, "g"), '<mark>' + target + '</mark>')
    });
}

Isso vai criar as tags mark em todas as palavras, porém como existem palavras repetidas, algumas pode ter duas taks mark ou até mais.

Para corrigir isso, podemos optar por colocar as palavras já substituídas em um Map, veja um exemplo:

var palavrasReplace = new Map();

while (resultado = exp.exec(target)) {
  const palavra = resultado[0];

  if (!palavrasReplace.has(palavra)) {
    marcarTexto_adverbio(palavra); // função que coloca uma tag <mark> em volta
    palavrasReplace.set(palavra, true);
  }
};

Veja o exemplo completo:

function marcarTexto_adverbio(target) {
    $("#content").html(function (_, html) {
        return html.replace(new RegExp(target, "g"), '<mark>' + target + '</mark>')
    });
}

function teste() {
  var target = $("#content").text();
  var exp = /\w+mente/g; // regex ok
  var resultado = null;

  var palavrasReplace = new Map();

  while (resultado = exp.exec(target)) {
    const palavra = resultado[0];

    if (!palavrasReplace.has(palavra)) {
      marcarTexto_adverbio(palavra); // função que coloca uma tag <mark> em volta
      palavrasReplace.set(palavra, true);
    }
  };
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="content">novamente mais brevemente uma vez claro, claramente demente, igualmente. novamente.</p>

<button onclick="teste()">Mark</button>


Documentações:

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/RegExp

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/replace

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .