Thymeleaf - Unquoting a part of inline JavaScript expression

Question

I have a Spring Boot project, and I need to render a part of a script element like the following. (Assume that getMessage function is defined somewhere else.)

Expected output:

<script type="text/javascript">
    /*<![CDATA[*/
    var message = 'Hello, John' + getMessage();
    alert(message);
    /*]]>*/
</script>

where John is a Spring model attribute.

Is it possible to make the whole 'Hello, John' + getMessage() in a single Thymeleaf expression? Or, is assigning Hello, John and getMessage() to separate JavaScript variables then concatenating them the only way? I tried something like the following but it seems inlined JavaScript expression always gets quoted.

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var message = /*[[|'Hello, ${name}' + getMessage()|]]*/ 'Hello, John';
    alert(message);
    /*]]>*/
</script>

Actual output:

<script type="text/javascript">
    /*<![CDATA[*/
    var message = "'Hello, John' + getMessage()";
    alert(message);
    /*]]>*/
</script>

By the way, I'm using Thymeleaf 2.1.

M. Prokhorov · Accepted Answer · 2019-09-12 15:37:39Z

1

[[...]] notation is used for escaped inlining: it converts everything inside into a well-formed Javascript string.

Since you also want to call something, you need un-inlined version, using [(...)] notation:

var message = /*[('Hello, ${name}' + getMessage())]*/ 'Hello, John';

Do note, however, that this way you won't get automatically escaped string, so if ${name} contains single quote char ('), you will get malformed javascript expression. You will need to deal with this somehow.

More info: Thymeleaf: Javascript Inlining

edited Sep 12, 2019 at 15:37

answered Sep 12, 2019 at 15:27

M. Prokhorov

4,01327 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Deokkee Min Over a year ago

Thanks. /*[(|'Hello, ${name}' + getMessage()|)]*/ (with pipes) seems to be the way to go. Although, I should have clarified I'm using Spring Boot 1.5 which depends on Thymeleaf 2.1, and Thymeleaf 2.1 doesn't seem to understand [(...)] notation.

Deokkee Min Over a year ago

The [(...)] notation seems to be the new feature of Thmeleaf 3. github.com/thymeleaf/thymeleaf/issues/394

M. Prokhorov Over a year ago

@DeokkeeMin, pipe is the literal substitution, so I think you would replace ' chars with it, not just surround the thing. Come to think of it, try that without [()] notation.

Deokkee Min Over a year ago

Using pipes without [[...]] or [(...)] (i.e., /*|...|*/) didn't work. Apparently Thymeleaf doesn't pick it up as an expression.

Deokkee Min · Accepted Answer · 2019-09-13 02:25:30Z

1

Found that by using the special comment syntax /*[+...+]*/ I could unquote the part following the thymeleaf expression.

/*[+
var message = [[|Hello, ${name}|]] + getMessage();
+]*/

Result:


var message = 'Hello, John' + getMessage();

Works on Thymeleaf 2.1.

answered Sep 13, 2019 at 2:25

Deokkee Min

256 bronze badges

Collectives™ on Stack Overflow

Thymeleaf - Unquoting a part of inline JavaScript expression

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related