How to apply html to text found in javascript?

Question

I need to use regex in javascript

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

After picking up this text, I should analyze whether it contains any words or expressions. Here is a list of what I need to capture:

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

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

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

As it should be:

<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 three 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 I need to treat. However I cannot give replace taking 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 fix this?

Answer 1

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 take all elements with the text class (.text), then I loop with each element, take the value of the element at a time and make a substitution according to regex*, then put the result in div#resultado.

Regex*

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

The regex works as follows:

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

[^\"']+ - Detects anything other than double quotation marks and single quotation marks one or more times (in the case of text between quotation marks).

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

set.Join('|') - It will take the reserved array and join the elements in a string separating by |, this will help us to finish the regex, with the words reserved.

The parentheses from start to finish are used to use this value in the $1 variable.

gi, in the second parameter represent:

g - correspond globally

i - ignore capital. /ore.

More information: Regexp