javascript - jQuery putting content of a paragraph in a textarea - Stack Overflow

admin管理员组

文章数量:1320661

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)
}
$("#replace").click(edit);

Demo

But it doesn't work correctly. There are spaces before and after the text.
How do I fix it?

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)
}
$("#replace").click(edit);

Demo

But it doesn't work correctly. There are spaces before and after the text.
How do I fix it?

• javascript
• jquery

Share Improve this question Follow edited May 2, 2014 at 15:12 yoozer8 7,48977 gold badges6262 silver badges9696 bronze badges asked Aug 15, 2011 at 9:43 krityakritya 3,37288 gold badges4545 silver badges6060 bronze badges 3

• I don't know the answer, but $("p:first").text() is equal to $("p").text(). – pimvdb Commented Aug 15, 2011 at 9:47
• @pimvdb: And a lot clearer to read. – Lightness Races in Orbit Commented Aug 15, 2011 at 9:49
• Best way to fix it is to just remove all the extra whitespace in the <p> tag - jsfiddle/z9xCm/16 Assuming you have some control over that? – Richard Dalton Commented Aug 15, 2011 at 9:51

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

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/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/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 pact and mented 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/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);

本文标签： javascriptjQuery putting content of a paragraph in a textareaStack Overflow