javascript - jQuery将段落内容放在textarea中

我试图通过用具有相同内容的文本区域替换段落来做到这一点。

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

但是它不能正常工作。文本前后有空格。
我如何解决它？

最佳答案

您的脚本正在按照 jar 上的指示执行。您正在获取空格，因为<p>标记内有空格和换行符。

要删除文本格式，请尝试以下操作: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);

首先，我们删除换行符，然后删除多个重复的空格，然后在文本的开头和结尾处 trim 空格。

有点偏离主题，但也可以重写为: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') }
    }));
});

这是同一件事，但是形式更简洁，更注释。

$("#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 */
});

注意，用于创建具有属性的新元素的 $("...", {...}) syntax只是introduced in jquery 1.4。