Separate <script> tag by semicolon

Question

I have a variable you can store plain text and the tags <script> and <img>, delimited by (';'). To separate the information, I use the method split(';'). Works well for texts and <img>, however, with <script> makes a mistake (SyntaxError: unterminated string literal), I imagine due to the various dots and commas within it. I would like a solution that would work so much to text and <img>, how much to <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(';'));

Answer 1

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

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

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

That is, the code is not even executed because when the parse document, soon occurs an error of syntax.

---

Your code to work properly needs to be adapted 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.

1. The split() should take ; to pick up the separation of tags and not the ; within them.

   ^{Depending on the complexity of the code within the tags of script, the split() may need adjustments to your parameter.}

2. The < shall be converted into the < so that the browser does not read this text as opening a script.

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

Answer 2

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

On the point-and-point question within scripts, in the absence of a more complete solution (i.e. a parse appropriate of the content) what you can do is - after separating into pieces - re-join 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>";