Greater than > Less than < inside thymeleaf javascript... Error: The content of elements must consist of well-formed character data or markup

Question

I get this error when I try to insert < or > operators inside the thymeleaf javascript.

My code

<script th:inline="javascript">
    $(document).ready(function () {
        ...
        if(timeRemain < 0){
            ...
        }
        ...
        var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
        ...         
    });
</script>

Error message

org.xml.sax.SAXParseException: The content of elements must consist of well-formed character data or markup.

How can i solve this?

Answer 1

This issue is solved by adding CDATA to the script tag as below

<script th:inline="javascript">
    /*<![CDATA[*/
    ...  
    ...
    ...
    /*]]>*/
</script>

Answer 2

Apart from using CDATA you can also encode < as &lt; and > as >