I'm having a bit of trouble with getting an "editable" block of text working if the text has line breaks in it.

I have two elements, a div and a textarea. When the user clicks Edit, I have the following code to populate the textarea:

text = $('#div').text();
$('#div').replaceWith('<textarea id="textarea"></textarea>');
$('#textarea').val(text);

When the user is finished editing and clicks Save, I have the following:

text = $('#textarea').val();
text.replace(/\n/g, "<br />\n");
$('#textarea').replaceWith('<div id="div"></div>');
$('#div').html(text);

However, if the div originally has multiple lines in it (with <br /> tags), if I click edit and then save, all the line breaks disappear.

I've used Firebug to try and get a feel for what's going on, but it looks like the String.replace() line has absolutely no effect, no matter what I do with it.

I'm sure I'm missing something obvious here, but I can't for the life of me figure out what it is.

I'm having a bit of trouble with getting an "editable" block of text working if the text has line breaks in it.

I have two elements, a div and a textarea. When the user clicks Edit, I have the following code to populate the textarea:

text = $('#div').text();
$('#div').replaceWith('<textarea id="textarea"></textarea>');
$('#textarea').val(text);

When the user is finished editing and clicks Save, I have the following:

text = $('#textarea').val();
text.replace(/\n/g, "<br />\n");
$('#textarea').replaceWith('<div id="div"></div>');
$('#div').html(text);

However, if the div originally has multiple lines in it (with <br /> tags), if I click edit and then save, all the line breaks disappear.

I've used Firebug to try and get a feel for what's going on, but it looks like the String.replace() line has absolutely no effect, no matter what I do with it.

I'm sure I'm missing something obvious here, but I can't for the life of me figure out what it is.

• javascript
• jquery
• regex

3 Answers 3

text.replace() does not replace the original text. It returns the replaced text.

Please do text = text.replace(...).

String objects are immutable, that is, they cannot be modified.

With that in mind, all "seemingly mutating" String methods (such as replace(), substring(), charAt(), etc) return a new String and do not modify the object on which the method was invoked on.

So in order for this to work, you need to store the return value of replace(), you can even reassign the original variable to the return value:

text = text.replace(/\n/g, "<br />\n");

Reassign the result of replacement back to the original variable:

text = text.replace(/\n/g, "<br />\n");

If you are having trouble with a function it's often a good idea to read the documentation:

Description

This method does not change the String object it is called on. It simply returns a new string.

...

Examples

var re = /apples/gi;
var str = "Apples are round, and apples are juicy.";
var newstr = str.replace(re, "oranges");