Question

我尝试使用具有相同内容的文本区域替换段落。

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

但它无法正常工作。文本之前和之后都有空格。
我该如何解决？

Answer 1

你的脚本就像在锡上说的那样。由于您的<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);

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

有点偏离主题，但也可以改写为：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。

Answer 2

您可以使用方法$.trim()删除开头和结尾处的空格：

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

Answer 3

您可以手动修剪每一行：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

您的段落在每行的开头都有前导空格。当您将其转换为textarea时，这些仍然存在。因此，请从<p>块中删除空格以解决问题。

Updated demo

如果您不希望它们保留，也可以删除换行符。

Updated demo without line breaks either

Answer 5

将以下内容替换为正则表达式（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);

jQuery将段落的内容放在textarea中

5 个答案: