Java UTF-8特殊字符转换为JavaScript

Question

I have a Java Web Application(Webwork) and I have some .jsps which show some data that can be special (UTF-8) characters. Ex:Jérôme Serrano

The .jsps include the correct UTF-8 headers:

• in my jsp I include a decorator.jsp which has <%@ page pageEncoding="UTF-8" contentType="text/html;charset=utf-8" %>
• decorator.jsp in turn includes a meta.jsp which looks like:

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

In .jsp I read my data like:

<ww:property value="%{content.author}" />

and it is correctly displayed:

I try to pass the string to JS, so that after the page is loaded I do something else(like call another service when the user clicks a button)

<script type="text/javascript" charset="utf-8">
var contentData = {};
contentData.author = "<ww:property value="%{content.author}" />";
alert(contentData.author);
</script>

BUT in JS the characters are not displayed correctly!

So why when the .jsp is loaded the characters are rendered correctly, but once we pass them into JS they are broken?

Answer 1

An external JavaScript with an UTF-8 character set:

 <script src="myscripts.js" charset="UTF-8"></script> 

or internal :D !

 <script charset="UTF-8"></script> 

Answer 2

Try to save your files using the option "Save with encoding" on your code editor. I know that Sublime Text has this option (File -> Save with encoding).

You can try different encodings. UTF-8 or ISO-8859-1.

The idea is, you have to save the file using the same encoding which the headers (meta) is.

Answer 3

After debugging and struggling with this whole night, here is my solution: - instead of writing values from Java directly into JavaScript variables like:

<script charset="UTF-8">
var myName = "<ww:property value="name" />";
alert(">>" + myName);
</script>

in which case char encoding is not working properly.

I write Java values into hidden input . This also has the benefits of automatically escaping chars like: '(apostrophe), " (quote) , etc...

<input id="name_in" type="hidden" value="<ww:property value="name" />">
<script>
    var elem = $('#name_in').val();
    alert(">>"+elem);
</script>

In this case encoding works perfectly! Also there is no need to JS escape chars like: ' and "