How to display special characters in HTML

Question

I have been searching around on the internet and have found lots of discussions about regex for stripping out or fixing special characters coming through in HTML, but I am looking for a different solution.

I have some text coming through that looks like this: 12DR - Constant™ Cloth.

That texts comes through and when I append it to a div on my page, it looks like this: 12DR - Constantâ„¢ Cloth.

I don't know all of the special characters coming through. Is there some function that I am missing that cleans up the text to show in HTML properly without me having to manually write regex for each possible character?

score 1 · Answer 1 · answered Aug 03 '16 at 19:15

I believe this http://www.web2generators.com/html-based-tools/online-html-entities-encoder-and-decoder is what you are looking for. This site replaces the special characters in a given text with their corresponding html codes for you.

Take whatever text you need converted and paste it into the text box. Then press encode and you can do whatever you need with it!

score 0 · Answer 2 · answered Aug 03 '16 at 18:32

0

Most browsers support HTML codes for special characters. The code for the trademark symbol if &#8482.

answered Aug 03 '16 at 18:32

Sam Siegel

21
3

score 0 · Answer 3 · answered Aug 03 '16 at 18:34

It looks like a character encoding issue. To solve this, you need to know what is the input encoding format, and the one used in your website.

Blind advice : your website and database should both be encoded in UTF-8, and if your text input use a different one, convert it when you acquire it. That will solve all your encoding problems forever.

score 0 · Answer 4 · answered Aug 03 '16 at 18:35

Try something like this.

Make a span with a class of TM

  <span class='tm'></span>

And then in the css file you will need to use a :before or :after tag like this

.tm:after
{
    content:'\2122';
    font-size:20px;
    height:50px;
    width:50px;
    color:black;
}

score 0 · Answer 5 · answered Aug 03 '16 at 18:35

0

So you can use special characters by using

You use the ampersand and the semicolon to indicate the special character.

Here is a list of a lot of the special characters you can use! Have fun. https://www.utexas.edu/learn/html/spchar.html

answered Aug 03 '16 at 18:35

Chris Pena

374
1
4
10

score 0 · Answer 6 · answered Aug 03 '16 at 18:39

0

You also could use &trade.

You can find more info about UTF-8 encoding here.

answered Aug 03 '16 at 18:39

Thoaren

194
9

score 0 · Answer 7 · answered Aug 03 '16 at 18:42

0

have you tried the htmlentities already?

string htmlentities ( string $string [, int $flags = ENT_COMPAT | ENT_HTML401 [, string $encoding = ini_get("default_charset") [, bool $double_encode = true ]]] )

answered Aug 03 '16 at 18:42

Antonio Martello

37
4

score 0 · Accepted Answer · answered Aug 03 '16 at 21:19

I feel so silly. I checked into everything that you guys said in your answers and none of them were working for my situation. Finally I found out that my browser, Chrome, was set to the wrong settings in the font settings! It was set to "Western (Windows-1252)". I changed that to UTF-8 and it worked. Just go to chrome://settings/fonts in Chrome.

How to display special characters in HTML

8 Answers8