Separate script tag by semicolon

Question

Separate script tag by semicolon

Navigation

#1 by (4 votes)
#2 by (3 votes)

1

I have a variable that can store plain text and tags <script> and <img> , delimited by (';') . To separate information, I use the split(';') method. It works fine for texts and <img> , however, with <script> gives error ( SyntaxError: unterminated string literal ), I imagine it due to the various semicolons inside it. I would like a solution that works for and <img> , and for <script> .

var test = 'texto1; texto2'; // Sem problema
var test = '<img src="imagem.jpg" />; <img src="imagem2.jpg" />'; // Sem problema
var test = '<script type="text/javascript">var a = "valor1";</script>; <script type="text/javascript">var b = "valor2";</script>'; // Com problema
console.log(test.split(';'));

javascript regex

asked by anonymous 21.03.2015 / 17:49

2 answers

3

If your script is embedded in the page (ie <script type="text/javascript"> código </script> ), see Zuul's answer for one possible solution (another would be to move your script to an external file, which in my understanding would not be subject to this problem).

As for the question of semicolons within scripts, in the absence of a more complete solution (ie an appropriate parse of the content) what you can do is - after breaking up into pieces - rejoin those pieces that should be together. Example:

var test = 'texto1;texto2;<script type="text/javascript">var a = "valor1";<\/script>; <script type="text/javascript">var b = "valor2";var c = "valor3";<\/script>;<img src="imagem.jpg" />; <img src="imagem2.jpg" />';

var pedacos = test.split(';');
var resultado = [];
for ( var i = 0 ; i < pedacos.length ; i++ ) {
    var proximo = pedacos[i];
    while ( proximo.indexOf("<script") >= 0 && proximo.indexOf("</script") < 0 )
        proximo += ';' + pedacos[++i];
    resultado.push(proximo);
}

// Só para visualização
document.querySelector("body").innerHTML += "<ul>";
for ( var i = 0 ; i < resultado.length ; i++ )
    document.querySelector("body").innerHTML += "<li>" + resultado[i].replace(/</g, "&lt;") + "</li>";
document.querySelector("body").innerHTML += "</ul>";

21.03.2015 / 19:36

How to make a racing effect? Delete files by extension

score 4 · Accepted Answer

The problem is not in ; , but rather in the fact that browsers parse the string <script> abstractly, then looking for a </script> .

As you have in the contents of the variable test the text <script> , you receive the browser error when parse this code:

SyntaxError: unterminated string literal  
var test = '<script type="text/javascript">var a = "valor1";  
-----------⤴

In other words, the code does not even execute because parse of the document, a syntax error occurs soon.

Your code to work properly needs to be tailored to:

var test1 = 'texto1; texto2';
console.log(test1.split('; '));

var test2 = '<img src="imagem.jpg" />; <img src="imagem2.jpg" />';
console.log(test2.split('; '));

var test3 = '&#60;script type="text/javascript">var a = "valor1";&#60;/script>; &#60;script type="text/javascript">var b = "valor2";&#60;/script>';
console.log(test3.split('; '));

See example in JSFiddle .

The split() must be ; to catch the separation of the tags and not the ; within them.

Depending on the complexity of the code within the script tags, split() may need to adjust its parameter.

The < must be converted to the < entity so the browser does not read this text as opening a script tag.

Note:
You can also escape as follows: <\/script> instead of using HTML Entities.