We Keep Coding

spaces causing placeholder to wrap incorrectly

I am creating a typing trainer page where the user can practice their typing. Consider the following:
HTML:
<div>
<input type="button" value="Start!">
</div>
<div id="cd">
<span id="time"></span> left!
</div>
<div data-placeholder="Some text goes here." id="ph">
<div contenteditable="false" id="ed"></div>
</div>
https://jsfiddle.net/y7nwju6p/8/
As the user types, the character turns blue if it's correct and red if it's incorrect. Everything works correctly, as long as the text isn't more than one line. See the following:
https://jsfiddle.net/nce4zqeu/30/
The problem is that I am replacing characters in the placeholder with spaces as the user types so that it looks like they are disappearing. Once this amounts to an entire line of spaces, the text wraps incorrectly. Is there any way to make it so that it wraps correctly?
Thank you for your help.

The problem with your current implementation is that you need to insert nonbreaking space, in this post (javascript nonbreaking space) I found out that '\xa0' is the raw char for non breaking space.
After modifying your snippet in the following lines (144 and 147) from "\u2008" to "\xa0" it worked like a charm.
Edit
I discovered two issues in this code snippet, the first one is that "\u2008" doesn't work as expected on firefox (the spaces dissapeared from the placeholder), so "\xa0" is better to use in this case (worked in chrome and firefox).
The second one, is the issue that the author describes in this question, the answer was to use:
word-break: break-all; // this does the job in firefox
word-break: break-word; // this does the job in chrome
These properties must stay in that order so firefox can use only the first one and ignore the second one (because is not supported), and chrome will understand both of them but will ignore the first one and use the second one (because of the cascading nature of CSS).

Preserving Newlines When Using ".text" or ".textContent". Possible? Alternatives? Workarounds?

If I grab some html from one element, then attempt to assign it as the text content of another element, newlines are not preserved (at least not in the latest Firefox and Chromium).
So, for example, the follow code (with sensible html) produces output where the newlines are replaced by spaces. Well, except the alert, which works as expected.
$("#info").data("html", $("#info").html());
$("#jquery").text($("#info").data("html"));
document.getElementById("javascript").textContent = $("#info").data("html");
$("#alert").click(function() { alert($("#info").data("html")) });
Here's a running example: http://jsfiddle.net/76S7z/2/
There should be some method of setting the html of one element as the text of another while preserving newlines properly.
Is this possible with "text" or "textContent"? Is there an alternative way to do this? Is there a simple workaround? A less than simple workaround?

As you've already determined, Web browsers don't normally render newline characters \n as line breaks. If you're resistent to adding the line break element <br />, you can use the white-space CSS property with the value pre-line, which will:
Sequences of whitespace are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
Be sure to check the property's compatibility tables before using.
<div style="white-space: pre-line;">
Look
at
these line breaks!
</div>
Here's a JSFiddle example.

Mustache.js allow only line breaks, escape other HTML

I am creating comments from user input and rendering them using Mustache.js after a user clicks 'submit'. I realize I can replace user input line breaks (\n) with <br/> to render as HTML breaks, such as
myString.replace(/\n/g, '<br />');
and I realize I can make Mustache not escape HTML by using triple brackets
{{{myString}}}
However, I would like to escape all user HTML as Mustache would typically do with double braces {{ ... }}, with the exception of allowing line breaks with <br/>
What is the best way to do this? I can replace the line breaks after it has been rendered, but that seems like a very inefficient solution, and I'm thinking there has to be a better way.

Option 1 - Use a pre tag:
It's actually best (or efficient) that you wrap text in a <pre></pre> tag, which will preserve the white space in the text.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre
And enable word-wrap
How do I wrap text in a pre tag?
- http://jsfiddle.net/X5ZY7/
Option 2 - Split your string into lines, and use a mustache each:
comment = userComment.split("\n")
{{#comment}}
{{comment}}<br/>
{{/comment}}
Option 3 - Manually escape your string using your favorite method before injecting the tags:
var div = document.createElement("div")
div.textContent = comment
comment = div.innerHTML.replace(/\n/g, "<br/>")
{{{comment}}}

If you're looking to add line breaks to a textarea you need to replace \n with

How to replace word break with line break in a textarea

Browsers inserts automatically a word break when text reaches the end of the box.
I would like to make this "invisible" to real \n.
Here is what I have tired:
http://jsbin.com/uraneq/1/edit
Example:

You can try to use wrap="hard" attribute for TEXTAREA element. Older browsers support physical value which has similar meaning as hard (but is invalid at least in HTML5).

​ will not be auto inserted by the browser itself so you cannot match it in auto broken text.
however.. you can match line length to see when there might be a possible linebreak (in case you use a block font)

Moving data back and forth between p and textarea, but preserving linebreaks

This should be a simple one for someone who gets regex.
I have a field on a page that is pre-populated by php, but is editable using javascript. I need to be able to preserve linebreaks when swapping between 'edit mode' and 'fixed mode'.
I understand that textareas like their linebreaks to be \n, and normal html likes to see <br /> tags. I'm using the function .replace(/\n/g, '<br />') to get from textarea to div, but I'm not sure what to use to get the field back into the textarea and keep the linebreaks.
Also I'm not sure whether just replacing <br /> with \n is safe, in case the browser decides it likes <br> better.

When you set white-space: pre-wrap in CSS then the line breaks are preserved with no need to replace them with br tags.
See this example: http://jsfiddle.net/jVBdm/
Update: white-space: pre-wrap will not work in IE6 and IE7 (thanks Kenneth J for pointing this out) but white-space: pre will work — which may or may not be enough for you. You can use a conditional style for IE6 and IE7 to use pre and use use pre-wrap on modern browsers.

It does not really matter whether you use <br /> (xhtml) or <br> browsers should parse them exactly the same.
I think you would use the same break tag you inserted.
To be safe, I suppose you could just do both.
txt = txt.replace(/<br \/>|<br>/gi, '\n')