How to apply html to text found in javascript?

Question

How to apply html to text found in javascript?

Navigation

#1 by (2 votes)

3

I need to make use of 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 have to look at it if it contains certain words or expressions. Here's a list of what I need to capture:

Any word enclosed in double quotation marks
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, they should apply an html element only around those terms found . Here's 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 to stay:

<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 not do is get these 3 items and apply them to a replace simultaneously in my text. I have identified in the code below the regular expressions and the array of words that I need to deal with. But I can not 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 resolve this?

javascript jquery

asked by anonymous 15.12.2016 / 13:19

1 answer

Picture does not appear 100% identify a click outside the div with jquery

score 2 · Accepted 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><divclass="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 class text (.text), then I loop with each element, get the value of the element of the time and make a substitution according to the regex *, then puts the result in div#resultado .

Regex *

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

regex works as follows:

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

[^ \ ''] + - Detects anything other than double quotation marks and single quotation marks one or more times (in this case the text that will be enclosed in the quotation marks).

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

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

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

The 'gi', in the second parameter represent:

g - match globally

i - ignore uppercase / lowercase.

More information: RegExp