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.