How to apply html to text found in javascript?

Question:

I need to use regex in javascript

The situation is the following: I need to get the text that is with you inside the element with the text class.

After getting this text, I must analyze in it if it contains certain words or any expressions. Here's a list of what I need to capture:

  • Any word in double quotes
  • Any word in single quotes
  • Any word that is within the array defined in javascript

If any of these cases are found in the text, it should apply an html element only around these found terms . Here is the example:

"Esse texto está entre aspas". Esse aqui não está. Não esqueça de colocar cláusula WHERE no seu UPDATE

How it should look:

<span>"Esse texto está entre aspas"</span>. Esse aqui não está. Não esqueça de colocar cláusula WHERE no seu <span>UPDATE</span>

What I can't do is take these 3 items and apply them to a replace simultaneously in my text. I identified in the code below, the regular expressions and the array of words that I need to handle. But I can't give the replace getting the value found.

$(".texto").each(function(){
    var termos = ["insert", "update", "delete"];
    var texto = $(this).text(); 
    var aspasDuplas = "(\"(.*?)\"){1,}";    
    var aspasSimples = "(\'(.*?)\'){1,}";   
    // Fazer o replace  
})

How can I solve this?

Answer:

This code will help you:

 var reservado = ['insert', 'update']; var regex = new RegExp("([\"'][^\"']+[\"']|" + reservado.join('|') + ")", 'gi'); $('.texto').each(function(i, el) { var texto = $(el).html(); var resultado = texto.replace(regex, '<span>$1</span>'); $('#resultado1').text(resultado); $('#resultado2').html(resultado); });
 span { color: red; }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="texto"> "Esse texto está entre aspas". Esse aqui não está. Não esqueça de colocar cláusula WHERE no seu UPDATE </div> <br> <strong>Resultado TEXTO:</strong> <p id="resultado1"></p> <strong>Resultado HTML (tag span com cor vermelha):</strong> <p id="resultado2"></p>

Explanation

First I make a selector to get all the elements with the text class (.text), then I loop through each element, get the value of the element at the time and do a substitution according to the regex*, then put the result in div#resultado .

Regex*

"([\"'][^\"']+[\"']|" + reservado.join('|') + ")"

The regex works as follows:

[\"'] – Detects quotes and single quotes (note that the backslash is for escaping, since I started the string with double quotes).

[^\"']+ – Detects anything other than double quotes and single quotes one or more times (in this case the text that will be between the quotes).

| – It has the logical value OR (OR), in this case it's serving me to specify everything I want to detect according to your rule (everything between single and double quotes, and reserved words).

reserved.join('|') – It will take the reserved array and join the elements into a string separated by |, this will help us to finish the regex , with the reserved words.

The parentheses from beginning to end are used so that we can use this value in variable $1.

The 'gi' in the second parameter represent:

g – match globally

i – ignore case/minusc.

More information: RegExp

Scroll to Top