3

$.fn.wrapInTag = function(opts) {

    var tag = opts.tag || 'strong',
        words = opts.words || [],
        regex = RegExp(words.join('|'), 'gi'),
        replacement = '<' + tag + '>$&</' + tag + '>';

    return this.html(function() {
        return $(this).text().replace(regex, replacement);
    });
};

$('p').wrapInTag({
    tag: 'em',
    words: ['html', 'CSS', 'JavaScript'],
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p>O HTML d é muito usado nos dias de hoje, juntamente com o HTML usamos JavaScript e CSS...</p>

Estou tendo problemas com o RegExp no Jquery, eu tenho uma lista de palavras que ele pega do <p> e coloca dentro do <em>. Ele funciona quase que certo, porém ele não respeita palavras inteiras, se eu procuro por HTML ele retorna HTML1, HTMLX, HTMLZ e não só HTML, se o HTML está junto com outras palavras ele identifica a palavra também no meio de outras, ele não respeita uma palavra inteira.

O que eu procuro é que:

  • "HTML" fique: HTML
  • "HTMLabc" fique intacto, sem ser itálico, somente: HTMLabc;

Meu código de exemplo: http://jsbin.com/zopilefevu/edit?html,js,output

Façam o teste adicionando qualquer letra na frente ou atrás das palavras html, CSS, e JavaScript você poderão ver que ele continua considerando as palavras mesmo tendo outros caracteres juntos no começo ou no final da palavra.

5
  • Funciona para mim... podes explicar melhor como reproduzir o problema?
    – Sergio
    11/12/2016 às 21:01
  • Este funciona como queres? jsfiddle.net/hrmgwjxf (é igual ao teu jsBin)
    – Sergio
    11/12/2016 às 21:03
  • Olá boa noite, é assim no texto tem as palavras HTML, CSS e JS. Se você colocar um outro caractere na frente do HTML por exemplo abcHTML, ele continua considerando o HTML eu gostaria que ele respeitasse as palavras já que HTML é diferente de abcHTML. 11/12/2016 às 21:03
  • ah... ok, percebi.
    – Sergio
    11/12/2016 às 21:04
  • Existe uma maneira de arrumar isso ? 11/12/2016 às 21:05

1 Resposta 1

3

Podes juntar uma regra de negação em cada palavra. Ficaria assim:

regex = RegExp('(\\W|^)(' + words.join('|') + ')(\\W|$)', 'gi'),

e desse modo ficarias com uma regex assim:

/(\W|^)(html|CSS|JavaScript)(\W|$)/gi

e depois um passo importante:

replacement = '$1<' + tag + '>$2</' + tag + '>$3';

que faz com que indexe o que foi capturado dentro de cada um dos grupos de captura () e, respetivamente, coloca no sítio certo da nova string que vai ser formada.

Assim, na prática impede que haja match se houver uma letra ou numero antes ou depois da paravra que indicaste.

jsFiddle: https://jsfiddle.net/m4dekxq4/

regex: https://regex101.com/r/lEP8DX/2

7
  • 1
    Nossa amigo muito obrigado :-) Funciona exatamente como eu queria !!! 11/12/2016 às 21:21
  • 1
    @PatrickALima fiz uma melhoria sugerida pelo @bacco, assim permitindo ter uma das palavras chave no inicio ou fim do texto da tag.
    – Sergio
    11/12/2016 às 21:52
  • Dei uma olhada nas modificações desde já agradeço, ficaram muito boas, gostei, realmente uma boa ideia do bacco. Eu estou tentando pegar o texto de uma textarea com o $('textarea').val(); e passar esse texto como variável para esta função, mais não estou conseguindo kkkkk. Sou um pouquinho iniciante no assunto. Sem querer abusar muito você poderia me dizer como posso mudar a função atual? Desde já agradeço :-). Eu vou incluir mais algumas palavras e gostaria de usar o ultimo método na linha 12 do jsfiddle que separa elas como se fosse um array mesmo, para ele procurar as palavras. 11/12/2016 às 23:53
  • @PatrickALima adapta o meu jsFiddle para o código que tens e não funciona. Assim posso ver como estás a fazer e ajudar.
    – Sergio
    12/12/2016 às 5:00
  • Olá Sergio bom dia, eu quero obter o texto de uma textarea via o keydown, passar esse texto para uma variável e acionar o RegExp para substituir as palavras em itálico e inserir o texto em uma div para mostrar o resultado, porém não estou conseguindo montar essa parte de passar como variável o texto obtido para o RegExp. Deixei em forma de comentário as dúvidas que eu tenho. Aqui segue meu projeto: jsfiddle.net/patrickalima98/kqmc9fp7/3 Desde já agradeço pela ajuda e atenção :-). 12/12/2016 às 12:12

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 .