Javascript jQuery将段落内容放入文本区域

我尝试这样做是为了用内容相同的文本区域替换段落

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

函数编辑（）{
var wdith=$（“p”）.css（'width'）
$（“p:first”）.replacetwith（“+$（“p:first”）.text（）+”）
$（“.edit”）.css（“宽度”，wdith）
}
$（“#替换”）。单击（编辑）；

但它不能正常工作。文本前后都有空格。

---

如何修复它？

将以下内容与正则表达式替换（）一起使用：

函数编辑（）{
var wdith=$（“p”）.css（'width'）
$（“p:first”）.replaceWith（“+$”（“p:first”）.text（）.replace（/[\n\r]（\s*）/g，”）.trim（）+“”）
$（“.edit”）.css（“宽度”，宽度）
}
$（“#替换”）。单击（编辑）；

您可以使用方法

$.trim（）

删除开头和结尾处的空格：

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

---

您的脚本正在按照锡罐上的说明执行。您获得空格是因为在

标记中有空格和换行符

要删除文本格式，请尝试以下操作：

函数编辑（）{
var wdith=$（“p”）.css（'width'）；
var p=$（“p:第一”）；
var t=p.text（）.replace（“\n”，”）.replace（/\s{2，}/g，”）.trim（）；
p、 替换为（“+t+”）
$（“.edit”）.css（“宽度”，wdith）
}
$（“#替换”）。单击（编辑）；

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

---

有点离题，但也可以改写为：

$（“#替换”）。单击（函数（）{
var p=$（“p:第一”）；
p、 替换为（$（“”）{
“类”：“编辑”，
“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 */
});

$（“#替换”）。单击（函数（）{/*分配匿名函数以单击事件*/
var p=$（“p:first”）；/*存储对元素的引用*/
/*获取不带格式的p.text（）*/
var t=p.text（）.replace（“\n”，”）.replace（/\s{2，}/g，”）.trim（）；
/*创建具有其他属性的新textarea元素*/
变量ta=$（“”{
“类”：“编辑”，
“文本”：t，
“css”：{
“宽度”：p.css（“宽度”）
}
});
p、 替换为（ta）；/*将p替换为ta*/
});

---

请注意，用于创建具有属性的新元素的命令仅为。

您可以手动修剪每一行：

函数编辑（）{
var wdith=$（“p”）.css（'width'）；
var spl=$（“p”）.text（）.split（“\n”）；
spl=spl.map（函数（v）{
返回v.trim（）；
});
var txt=spl.join（“”.trim（）；
$（“p:first”）.replace为（“+txt+”）
$（“.edit”）.css（“宽度”，wdith）
}
$（“#替换”）。单击（编辑）；

您看到的段落在每行开头都有前导空格。当您将其转换为

textarea

时，这些是剩余的。因此，请从

块中删除空格以解决问题

如果不希望换行符保留，请删除换行符

---

我不知道答案，但是

$（“p:first”）.text（）等于
$（“p”）.text（）
@pimvdb:而且读起来更清晰。解决这个问题的最好方法是删除标记中所有多余的空白-假设你对此有一些控制？我认为问题在于
文本区域的每行开头都有空格。这只会删除第一行开头的空格，而不会删除其他空格。那么这就是一个很好的例子，为什么要确切地解释他想要做什么。根据演示和他的描述，他想删除开头和结尾的空格。因为记者没有正确地思考他的解决方案@记者：不，他也需要从每一行中删减空格（实际的解决方案应该更一般）。从问题演示中可以清楚地看到这一点。@kritya:-1的评论非常糟糕+谢谢你让我笑了。孩子，你跳了一下枪，雷神之锤就砸在你身上：对不起，除了第4行的语法错误，我看不出有什么区别。编辑：哦，您正在使用jQuery对象替换为。不确定这是否有帮助。。。“这对我来说不合适。”托马拉克说得太差劲了？有什么不好的O@kritya：“是同一个兄弟”我甚至不知道从哪里开始它工作得很好，但有点。比肖恩的长一点：D无论如何谢谢：D：我不明白第二件事。你能解释一下吗D@kritya有关注释版本和参考链接，请参见更新的答案。本质上，
$（“.”，{…}）语法允许我们使用预先分配的属性动态创建dom元素。Ha ik:P我只是没有得到替换部分：D。因为我仍然无法在我的bliddy head中获得regex lol:D对于regex位，
\s
表示空白，而
{2，}
表示2次或更多次。尾随的
g
表示匹配字符串中所有出现的模式。所以整个语句（
replace（/\s{2，}/g，“”
）将用一个空格替换多个空格的所有出现。
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);

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

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