jQuery putting content of a paragraph in a textarea

I tried to do this for replacing 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)
}
$("#r开发者_JAVA百科eplace").click(edit);

Demo

But it doesn't work correctly. There are spaces before and after the text.

How do I fix it?

---

You script is doing as it says on the tin. You're getting spaces because you have spaces and line breaks within your <p> tags.

To remove the text formatting, try this: 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 the line breaks, then removed multiple repeated spaces, then trim spaces at the beginning and end of the text.

---

Somewhat off topic, but that 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') }
    }));
});

Here's the same thing, 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 only introduced in jquery 1.4.

---

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

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

---

You could trim 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);

---

You're paragraph has leading spaces at the start of each line. These are remaining when you convert it to a textarea. So remove the spaces from the <p> block to fix the issue.

Updated demo

Also remove line breaks if you don't want them to remain.

Updated demo without line breaks either

---

Use the following with a regular expression replacement (updated Fiddle):

 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);