Question

I have a chat window (using a <div>) that sometimes needs to get multiline entries. Until now, I’ve simply replaced incoming \n with <br> and displayed the text with .append(). Unfortunately, I’ve discovered leaving a naked .append() based on user input allows the user to insert arbitrary HTML, which will then be executed by the browser. Discovered this while copying a random StackOverflow page to it (to test large sends) and in it was a <link> tag, which promptly caused the browser to try to download the CSS file.

Changing this method to use .text() solved that particular problem, but now I am unable to display newlines. <br>s come through as literal text rather than HTML, and \n doesn’t seem to have any effect.

Any suggestions? Should I use .append() but find some way to escape all HTML tags except <br>? Or is there a way to slip newlines in to .text()? Or is there a third option I’m missing completely?

Answer 1

Use a <pre> element to preserve newlines in plain text (among other things).

http://www.codetoad.com/html/text/pre_tag.asp

If you want to insert html tags, you should be using $.html(), not $.text().