JQuery putting paragraph content in a text box

Question

I tried to do this to replace a paragraph with a text area with the same content.

function edit() { var wdith = $("p").css('width') $("p:first").replaceWith("<textarea class='edit'>" + $("p:first").text() + "</textarea>") $(".edit").css("width", wdith) } $("#replace").click(edit); 

Demo

But this does not work correctly. There are spaces before and after the text.
How to fix it?

Answer 1

You do the script as the tin says. You get spaces because you have spaces and line breaks in <p> tags.

To remove text formatting, try the following: http://jsfiddle.net/z9xCm/18/

 function edit() { var wdith = $("p").css('width'); var p = $("p:first"); var t = p.text().replace("\n", "").replace(/\s{2,}/g, " ").trim(); p.replaceWith("<textarea class='edit'>" + t + "</textarea>") $(".edit").css("width", wdith) } $("#replace").click(edit); 

First, we remove line breaks, then remove some duplicate spaces, then trim the spaces at the beginning and end of the text.

---

A bit off topic, but it can also be rewritten as: http://jsfiddle.net/z9xCm/52/

 $("#replace").click(function() { var p = $("p:first"); p.replaceWith($("<textarea/>", { "class": "edit", "text": p.text().replace("\n", "").replace(/\s{2,}/g, " ").trim(), "css": { "width": p.css('width') } })); }); 

It’s the same here, but in a less compact and commented form.

 $("#replace").click(function() { /* assign anonymous function to click event */ var p = $("p:first"); /* store reference to <p> element */ /* get p.text() without the formatting */ var t = p.text().replace("\n", "").replace(/\s{2,}/g, " ").trim(); /* create new textarea element with additional attributes */ var ta = $("<textarea/>", { "class": "edit", "text": t, "css": { "width": p.css('width') } }); p.replaceWith(ta); /* replace p with ta */ }); 

Note that the syntax $("...", {...}) for creating new elements with attributes was introduced in jquery 1.4 .

Answer 2

You can use the $.trim() method to remove spaces at the beginning and end:

 $.trim($("p:first").text()); 

Answer 3

You can crop each line manually: http://jsfiddle.net/z9xCm/14/ .

 function edit() { var wdith = $("p").css('width'); var spl = $("p").text().split("\n"); spl = spl.map(function(v) { return v.trim(); }); var txt = spl.join(" ").trim(); $("p:first").replaceWith("<textarea class='edit'>" + txt + "</textarea>") $(".edit").css("width", wdith) } $("#replace").click(edit); 

Answer 4

In the paragraph, you have leading spaces at the beginning of each line. They are saved when converted to textarea . Therefore, remove the spaces from the <p> block to fix the problem.

Updated demo

Also remove line breaks if you do not want them to remain.

Updated demo without line breaks either

Answer 5

Use the following with regular expression replacement ( updated script ):

  function edit() { var wdith = $("p").css('width') $("p:first").replaceWith("<textarea class='edit'>" + $("p:first").text().replace(/[\n\r](\s*)/g," ").trim() + "</textarea>") $(".edit").css("width", width) } $("#replace").click(edit);