Javascript Return"/"；textarea从div转换返回时的字符

我正在试验另一篇stackoverflow文章的脚本。我有一个textarea元素，有人可以输入文本。通过双击它，它将转换为div并保持换行符。当您单击div返回文本区域时，

将保持原样

您可以在这里看到JSFIDLE

如何在没有br的情况下返回文本，但保留换行符？

您应该使用

boxText = $(this).html().replace(/<br\s?\/?>/g,"\n");

boxText=$（this.html（）.replace（//g，“\n”）；

而不是

$(this).val().replace(/<br\s?\/?>/g,"\n");

$（this.val（）.replace（//g，“\n”）；

您需要为boxText指定新值，因为您可以这样设置文本区域值

$(this).replaceWith( '<textarea form="HTML" class="BoxText">' + boxText + '</textarea>' );

$（this）.replace为（“”+boxText+“”）；

---

如果你愿意尝试，我想你可能会在使用

contenteditable

元素时有更满意的时间。下面是我制作的一个简短演示，向您展示它是如何工作的

您可能会注意到在HTML部分中没有看到一个。向下查看

$.ready（）

块，您将看到我实际上在两个不同的

div

之间切换，因为（AFAICT）一旦将

内容添加到DOM中，您就无法更改它。所以我的解决办法就是把我需要的东西换掉。有人让我知道是否有一种方法可以做到这一点，以防我忽略了什么

注意，这是不完整的，虽然它在大多数浏览器中都能工作（看起来），但我知道Opera在某些方面有问题，而且我还没有向它抛出那么多可变文本。它似乎在Chrome和Firefox中工作得最好。当您与
contenteditable
交互时，试图解释粘贴的标记并平滑每个主要浏览器解释的不同方式肯定会有一些麻烦

这是一个开始。看看吧，看看你是怎么想的

HTML

<div class="boxtext" class="editable">Text Text Text...</div>

Javascript

(function ready($, win, doc, _c, _l, copies) {
    var $editable = $('<div class="editable" contentEditable="true">'),
        $uneditable = $('<div class="uneditable">'),
        $div = $('<div>'),
        $pre = $('<pre class="text">'),
        $doc = $(doc),
        $body,
        $boxes;

    $doc.ready(setup);

    function setup() {
        $body = $('body', doc);
        $boxes = $('.boxtext');

        $boxes.wrapInner($div.clone()).wrapInner($uneditable.clone());

        while (copies--) {
            $body.append($boxes.clone());
        }

        $boxes = $(".boxtext");

        $doc.on('click', $body, not);

        $boxes
            .on('dblclick.editable', '.editable, .uneditable', edit)
            .on('paste.editable', '.editable', paste);
    }

    function not(e) {
        !!$boxes.has(e.target).length || close.call(doc, e, true);
    }

    function close(e, call) {
        if (call) {
            $boxes.find('.editable').not(this).trigger('dblclick.editable');
        }
    }

    function edit(e) {
        var $this = $(this),
            $box = $boxes.has($this),
            $shim = $uneditable,
            type = '.uneditable';

        close.call(this, e, true);

        if ($this.is(type)) {
            $shim = $editable;
            type = '.editable';
        }

        $shim = $this.wrapInner($shim.clone()).find(type);

        $box.empty().append($shim);

        if (type == '.uneditable') {
            text.call($box[0]);
        }
    }

    function paste(e) {
        var $this = $(this),
            $target = $(e.target);

        (function a(th, ev) {
            function f(){clean.call(th, ev);}

            setTimeout(f, 1);
        })(this, e);
    }

    function clean(e) {
        var $this = $(this),
            $pres = [];

        $this.find('div > p').not(':empty').unwrap();
        $this.find(':empty').remove();
        $this.find('pre').each(function r(i, el) {
             $pres[i] = $(el).html();
        });
        $this.find('*')
            .not('h1, h2, h3, h4, p, div, br, pre, code')
            .children().unwrap();
        $this.html($.trim($this.html().replace(/(\r\n|\n|\r)/gm, ' ')));
        $this.html($.trim($this.html().replace(/>[ ]{1,}</gm, '><')));
        $this.find('pre').each(function r(i, el) {
              $(el).html($pres[i]);
        });
        $this.find('h1, h2, h3, h4, div, p, pre').after('<br/>');
        $this.find('br:last').remove();
    }

    function text(e) {
        var $this = $(this),
            $uneditable = $this.find('.uneditable').clone(),
            $text = $pre.clone();

        $uneditable.find('div > br').unwrap();
        $uneditable.find('div, p, br').after('\n');

        $text.text('Plaintext\n---------\n' + $uneditable.text());

        $this.append($text);
    }

    function log() {
        !_c || !_l.apply || _l.apply(_c, arguments);
    }

})(jQuery, window, document, console, console.log, 5);

（功能就绪（$、win、doc、\u c、\u l、副本）{
变量$editable=$（''），
$uneditable=$（''），
$div=$（''），
$pre=$（''），
$doc=$（doc），
$body，
$box；
$doc.ready（设置）；
函数设置（）{
$body=$（'body'，doc）；
$box=$（'.boxtext'）；
$box.wrapInner（$div.clone（））.wrapInner（$uneditable.clone（））；
而(副本--){
$body.append（$box.clone（））；
}
$box=$（“.boxtext”）；
$doc.on（'click'，$body，not.）；
美元箱
.on（'dblclick.editable'、'.editable、.uneditable'，edit）
.on（'粘贴.可编辑'，'可编辑'，粘贴）；
}
功能不可用（e）{
！！$box.has（e.target）.length | | close.call（doc，e，true）；
}
函数关闭（e，调用）{
如果（打电话）{
$box.find（'.editable'）.not（this.trigger（'dblclick.editable'）；
}
}
功能编辑（e）{
变量$this=$（this），
$box=$box.has（$this），
$shim=$uneditable，
类型='.uneditable'；
关闭。调用（this，e，true）；
如果（$this.is（type））{
$shim=$editable；
类型='.editable'；
}
$shim=$this.wrapInner（$shim.clone（））.find（type）；
$box.empty（）.append（$shim）；
如果（类型=='.uneditable'）{
text.call（$box[0]）；
}
}
功能粘贴（e）{
变量$this=$（this），
$target=$（e.target）；
（功能a（th，ev）{
函数f（）{clean.call（th，ev）；}
设置超时（f，1）；
})（本条，e）；
}
功能清洁（e）{
变量$this=$（this），
$pres=[]；
$this.find（'div>p'）。not（'：empty'）。unwrap（）；
$this.find（':empty'）.remove（）；
$this.find（'pre'）。每个（函数r（i，el）{
$pres[i]=$（el.html（）；
});
$this.find（“*”）
.非（'h1、h2、h3、h4、p、div、br、pre、code'）
.children（）.unwrap（）；
$this.html（$.trim（$this.html（）.replace（/（\r\n |\n |\r）/gm，）；
$this.html（$.trim（$this.html（）.replace（/>[]{1，}对不起！speed犯了一个错误：）对不起，我更新了到JSFIDLE的链接，我第一次放了一个旧的。它现在和我更新链接时的效果一样。非常感谢！但是为什么html（）而不是val（）？因为当你将文本区域转换为div时，div的内容是html，所以你需要使用$（选择器）.html（）进行访问，和$（selector）.val（）将返回value属性的值，在本例中为空。将从输入中获取值。实现得非常好。非常感谢您抽出时间。
(function ready($, win, doc, _c, _l, copies) {
    var $editable = $('<div class="editable" contentEditable="true">'),
        $uneditable = $('<div class="uneditable">'),
        $div = $('<div>'),
        $pre = $('<pre class="text">'),
        $doc = $(doc),
        $body,
        $boxes;

    $doc.ready(setup);

    function setup() {
        $body = $('body', doc);
        $boxes = $('.boxtext');

        $boxes.wrapInner($div.clone()).wrapInner($uneditable.clone());

        while (copies--) {
            $body.append($boxes.clone());
        }

        $boxes = $(".boxtext");

        $doc.on('click', $body, not);

        $boxes
            .on('dblclick.editable', '.editable, .uneditable', edit)
            .on('paste.editable', '.editable', paste);
    }

    function not(e) {
        !!$boxes.has(e.target).length || close.call(doc, e, true);
    }

    function close(e, call) {
        if (call) {
            $boxes.find('.editable').not(this).trigger('dblclick.editable');
        }
    }

    function edit(e) {
        var $this = $(this),
            $box = $boxes.has($this),
            $shim = $uneditable,
            type = '.uneditable';

        close.call(this, e, true);

        if ($this.is(type)) {
            $shim = $editable;
            type = '.editable';
        }

        $shim = $this.wrapInner($shim.clone()).find(type);

        $box.empty().append($shim);

        if (type == '.uneditable') {
            text.call($box[0]);
        }
    }

    function paste(e) {
        var $this = $(this),
            $target = $(e.target);

        (function a(th, ev) {
            function f(){clean.call(th, ev);}

            setTimeout(f, 1);
        })(this, e);
    }

    function clean(e) {
        var $this = $(this),
            $pres = [];

        $this.find('div > p').not(':empty').unwrap();
        $this.find(':empty').remove();
        $this.find('pre').each(function r(i, el) {
             $pres[i] = $(el).html();
        });
        $this.find('*')
            .not('h1, h2, h3, h4, p, div, br, pre, code')
            .children().unwrap();
        $this.html($.trim($this.html().replace(/(\r\n|\n|\r)/gm, ' ')));
        $this.html($.trim($this.html().replace(/>[ ]{1,}</gm, '><')));
        $this.find('pre').each(function r(i, el) {
              $(el).html($pres[i]);
        });
        $this.find('h1, h2, h3, h4, div, p, pre').after('<br/>');
        $this.find('br:last').remove();
    }

    function text(e) {
        var $this = $(this),
            $uneditable = $this.find('.uneditable').clone(),
            $text = $pre.clone();

        $uneditable.find('div > br').unwrap();
        $uneditable.find('div, p, br').after('\n');

        $text.text('Plaintext\n---------\n' + $uneditable.text());

        $this.append($text);
    }

    function log() {
        !_c || !_l.apply || _l.apply(_c, arguments);
    }

})(jQuery, window, document, console, console.log, 5);