A: 

I believe that the box is the font's representation of the UTF-8 values that the substring created. Try to remove the character at the box's position and it should be removed.

Zolomon
But I dont know if the box will appear everytime or not. I cant just randomly remove the last character. The text will eventually be dynamic.
Alec Smart
Try a font that is compatible with the language you are coding for? It should display the right representation every time then. Most special languages use a specific kind of fonts, try googling for the "language font utf-8" or something similar.
Zolomon
@Zolomon, thats not correct, cause you can see that the first few letters of the word are displaying correctly. and only after substr the box comes.
Alec Smart
A: 

Try avoiding to put UTF-8 byte sequences into JavaScript string objects. Instead, rely on the Unicode support of JavaScript, and use a proper Unicode string (instead of an UTF-8 string).

My guess is that you managed to slice the string in the middle of a character, so that the result is an incomplete character. Browser then try to render it anyway, leading to moji-bake.

Martin v. Löwis
So with “proper Unicode string” you mean UTF-16?
Gumbo
Yes, what do you mean by Unicode support of Javascript? Proper unicode string?
Alec Smart
+1  A: 

JavaScript encodes strings with UTF-16, meaning characters outside the basic multilingual plane have to be represented as a surrogate pair. Splitting a string in the middle of such a pair might explain your results.

As I understand the wikipedia article, you'll have to check if your last character lies in the range 0xD800–0xDBFF and, if so, either drop it or add the following character (which should be in range 0xDC00-0xDFFF) to the substring.

Christoph