TOGOUTECH

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

coder 2025-01-03 原文

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

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

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

最佳答案

您的脚本正如锡盒上所说的那样。你得到空格是因为你的 <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 .

关于javascript - jQuery 将段落的内容放入文本区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7063558/

有关javascript - jQuery 将段落的内容放入文本区域的更多相关文章

  1. Javascript:构造函数中的回调 - 2

    我正在尝试为一个对象编写OOjavascript,该对象具有昂贵的初始化过程,完成后会回调一个函数。问题在于调用者需要在回调例程中使用同一对象的函数,而该对象尚不存在://ctorforfooobjectfunctionfoo(callback){//doslowinitializationhere..//callbackwhendonecallback();};foo.prototype=function(){return{//doStuffmethoddoStuff:function(){alert('stuffdone');}};}();//instantiatethefooob

  2. 接口测试CURL复制以及postman的Code功能 - 2

    1.复制CURL在需要抓取url的网址中打开F12进行调试,打开Network  右键点击选择copy下的curlbash 2.postman导入打开postman点击import打开后就是下面这个页面选择Rawtext在下方的Pasterawtext粘贴上你需要请求的curl粘贴后点击高亮continue按钮 点击后会有新弹窗再点击import 保存后可直接send发送 3.postmancode生成 看了很多postman里自动生成code的教程,非常动心,但是打开自己的postman却没找到那个传说中在cookies旁边的code按钮。新版postman的code按钮如下图所示选择自己想

  3. javascript - 如何将以毫秒为单位的日期转换为 iso 格式的 javascript? - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:HowdoIoutputanISO-8601formattedstringinJavascript?如果我有一个以毫秒为单位表示日期的整数,将其转换为iso格式的语法是什么?

  4. javascript - 在 javascript/DOM 中存储文本内容的最快和/或最干净的方法是什么? - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭10年前。我通常会看到版本1,但我从事的一些开源项目使用版本2,而我过去也使用过版本3。有没有人有更优雅的解决方案,也许是更具可扩展性的解决方案?版本1:vartext1='thisismyscript\'scontent';版本2:Thisismycontentvartext1=$('#text1').html();版本3:vartext1=$('#text1'

  5. 第十四篇,STM32的CAN总线通信 - 2

    1.CAN总线的概念    CAN指的是控制器局域网网络(Controller Area Network),由德国博世汽车电子厂商开发出来。    CAN使用差分信号,具有较强的抗干扰能力和传输稳定性    CAN属于多主通信,网络中所有的节点都可以作为主设备进行通信    CAN的网络扩展极其方便,CAN网络中扩展了新的通信单元,网络中旧的单元和硬件无需任何改变。    CAN具有较强的纠错能力,可以发现传输中出现的错误,并对错误节点进行隔离;所有的单元都可以检测错误;检测出错误的单元会立即同时通知其他所有单元;正在发送消息的单元一旦检测出错误,会强制结束当前的发送。被强制结束发送的单元会不

  6. javascript - 两个相互依赖的字段的 knockout validation - 2

    考虑以下代码-varMyObjectModel=function(myObject){varself=this;self.myNumber1=ko.observable(myObject.number1).trimmed();self.myNumber2=ko.observable(myObject.number2).trimmed();我想扩展myNumber1和myNumber2,以添加knockoutvalidation,以便在两者均为空时抛出错误,并在其中一个有值时保持正常。知道如何实现这一目标吗? 最佳答案 您可以使用ko

  7. javascript - 元素缺少子元素的 jquery 选择器 - 2

    我需要帮助形成一个jquery选择器以返回缺少特定子元素的元素。给定以下HTML片段:BoxASpaceASpaceBBoxASpaceCBoxCSpaceDSpaceEBoxDSpaceF为我找到没有组件跨度的机架单元跨度。到目前为止,我有:$(".rack.rackspace")获取所有rackunit跨度,不确定如何排除具有组件跨度的那些或仅选择那些没有组件跨度的... 最佳答案 我猜下面的方法应该有效:$(".rack.rackspace:not(:has(span[id^=component]))")....演示:http

  8. Jenkins发布uniapp开发的H5遇到的问题 - 2

    目录​编辑 前言:一、问题:     二、解决经历:    1、思路1(不成功):    2、思路2(成功):        三、原因分析:总结前言:    背景:由于历史原因,公司有个历史项目使用vue开发的公众号H5,原生开发的微信小程序。两端功能的完全一样,但是需要维护两个项目,最近客户提了需求需要修改部分功能,博主接到需求后,觉得维护两套代码不仅是重复开发,测试起来也麻烦,因为之前是两个人开发不同端的缘故,导致大部分的bug都是因为两端不一致产生的。为了节省时间和维护成本,提升开发测试效率,在反复对比调研,最终选择了uniapp技术框架融合两端进行重构。一、问题:           

  9. PCM和WAV音频格式的区别,以及python自动转换 - 2

    目录WAV和PCM的简单介绍PCMWAV关于音频的基础知识声道数channels采样位数bits采样频率sample_rate进阶内容互相转换代码WAV和PCM的简单介绍PCMpcm:pulsecodemodulation,脉冲编码调制。将声音等模拟信号变成符号化的脉冲列,予以记录。是由[0]、[1]等符号构成的数字信号,未经过任何编码和压缩处理。pcm是没有压缩的编码方式。WAVwav:wav是一种无损音频文件格式,wav都有一个文件头,文件头包括音频流的【编码参数】,而对音频流的编码没有硬性规定,符合ACM规范的编码都行,所以wav格式通常只要在其他编码(pcm、MP3)下,加相应的dec

  10. javascript - javascript eventlistener 中 true 和 false 的区别 - 2

    我对事件监听器的概念有疑问。下面两个代码有什么区别我对真/假部分有疑问。当我在练习代码中用第二个代码替换第一个代码时,没有任何变化。a.addEventListener("click",modifyText,true);a.addEventListener("click",modifyText,false); 最佳答案 addEventListener中的true和false是bool值,指定是否需要捕获事件。这是语法和detail:object.addEventListener(eventName,function,useCapt

随机推荐