Skip to content

String doesn’t accept the close tag for

I am building a code-editor, and below is my code:

    <iframe id="code"></iframe>

export default {
  name: 'code-editor',
  mounted () {
  methods: {
    compile () {
      var html = document.getElementById("html");
      var css = document.getElementById("css");
      var js = document.getElementById("js");
      var code = document.getElementById("code").contentWindow.document;

      document.body.onkeyup = function () {;
          `${html.value} <style> ${css.value} </style> <script> ${js.value} <script> `

textarea {
  width: 32%;
  /* float: top; */
  min-height: 250px;
  overflow: scroll;
  margin: auto;
  display: inline-block;
  background: #f4f4f9;
  outline: none;
  font-family: Courier, sans-serif;
  font-size: 14px;

iframe {
  bottom: 0;
  position: relative;
  width: 100%;
  height: 35em;

Inside my onkeyup function in the writeln command, with the above string I get this error:

 error  in ./src/components/CodeEditor.vue?vue&type=script&lang=js&

Syntax Error: Unterminated template (35:75)

  33 |;
  34 |         code.writeln(
> 35 |           `${html.value} <style> ${css.value} </style> <script> ${js.value} 
     |                                                                            ^

But then if I remove the </script> tag from the string it works. I don’t know why it doesn’t accept the close tag.

Can anyone explain this to me? Is there any way to make it accept the </script> tag?


You need it to break the </script> into "<" + "/script>" so that the HTML parser doesn’t interpret it as the closing tag. You can also do </script>.

An example of how it works:

  console.log("hello </script>");
  console.log("hello <" + "/script>");

And an example of how it wouldn’t work (with plain </script> which would be interpreted as the closing tag):

  console.log("hello </script>");

And if you want to use it inside back quotes, still the same (adding this per OP’s comment):

  let foo = "foo";
  console.log(`hello ${foo} </script>`);