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

Question

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

6

我尝试将一个段落替换为一个文本区域，并使它们具有相同的内容。

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

演示

但它没有正确地工作。文本前后有空格。
我该怎么修复它？

- kritya

我不知道答案，但是$("p:first").text()等于$("p").text()。 - pimvdb

@pimvdb：而且更容易阅读。 - Lightness Races in Orbit

最好的解决方法是删除<p>标签中所有多余的空格 - http://jsfiddle.net/z9xCm/16/假设您对此有一定的控制？ - Richard Dalton

5个回答

1

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

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

- Reporter

我认为问题在于textarea每行开头有空格。这只会移除第一行开头的空格，而不是其他行。 - James Allardice

这是一个很好的例子，说明了为什么要准确地解释他想要做什么。根据演示和他的描述，他想要删除开头和结尾的空格。 - Reporter

由于记者没有仔细思考他的解决方案！ - Lightness Races in Orbit

@记者：不，他还需要去除每行的空格（实际解决方案应该比这个更通用）。从问题演示中可以看出这一点很清楚。 - Lightness Races in Orbit

0

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

- pimvdb

它的功能完全正常，但它比Shawn的要长一些 :D 不管怎样，谢谢 :D :D - kritya

0

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

更新演示

如果不想保留换行符，请删除它们。

没有换行符的更新演示

- Chris Snowden

-2

使用以下内容与正则表达式替换（更新的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);

- hayesgm

@kritya：非常糟糕的评论，给你-1分。让我有些发笑的话，给你+1分。 - Lightness Races in Orbit

小伙子，你有点过于急躁了，雷神之锤就会砸向你 :P - hayesgm

抱歉，除了第四行的语法错误外，我看不出有什么区别。编辑：哦，你正在使用jQuery对象进行替换。不确定这是否有帮助...对我来说没有。 - pimvdb

@tomalak 糟糕透顶的评论？有什么地方糟糕了吗？:O - kritya

@kritya：“兄弟，这是一样的。”我甚至不知道从哪里开始。 - Lightness Races in Orbit

有些微小的、不相关的差异，兄弟。但是我的正则表达式构建需要更多时间（而且现在是凌晨5点）。我更新后的答案应该是一个可行的解决方案。@Tomalak-geretkal，你住在哪个时区，这么晚还在工作？ - hayesgm

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shawn Chin · Accepted Answer

你的脚本按照它所说的去做了。你得到空格是因为在你的

标签内部有空格和换行符。

要删除文本格式，请尝试这个: 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 */
});

请注意，使用$("...", {...})语法创建带有属性的新元素仅在jquery 1.4中引入。