如何将空格和换行符从 TEXTAREA 转换为 html

Question

我需要将空格和换行符转换为 和 &nbsp。将文本从 TEXTAREA 转换为具有相同格式的 DIV - 并且 onClick 将文本转换回具有相同格式的 TEXTAREA。怎么办？

jsFiddle DEMO

HTML

<div id="meText"><br />Click to edit <br />this text.<br /> And this line has space &nbsp on the begining.<br />How to convert space to &nbsp ? <br /> <br /></div>

CSS

#meText{
    margin: 20px;
    width: 300px;
    height: 200px;
    background: red;
    font-family: Arial;
    font-size: 13px;
}
textarea {
    margin: 20px;
    font-family: Arial;
    font-size: 13px;
}

jQuery

$(function(){
    $("#meText").live('click',function(){
        var originalDiv = this;
        oldText = $(this).html().replace(/<br\s?\/?>/g,"\n");
        oldText = oldText.replace(/&nbsp;/g," ");
        $(this).replaceWith($("<textarea></textarea>").text(oldText).width($(this).width()).height($(this).height()).blur(function(){
            newText = $(this).val().replace(/\r\n|\r|\n/g,"<br />");

            //newText = newText.replace(/\n\s|\r\s|\r\n\s/g,"<br />&nbsp;");
            //newText = newText.replace(/\s\s/g,"&nbsp;&nbsp;");

            $(this).replaceWith($(originalDiv).html(newText));
        }));
    });
});

Answer 1

做这样的事情：(javascript)

var x = "div to textarea";
var y = "textarea to div";

var div = document.getElementById('myDiv');
var txt = document.getElementById('myText');
var btn = document.getElementById('myBtn');
$(btn).click(function () {
    if (this.innerHTML == x) {
        txt.value = div.innerHTML.split('<br>').join('\n').split('&nbsp;').join(' ');
        div.innerHTML = "";
        btn.innerHTML = y;
    } else {
        div.innerHTML = txt.value.split('\n').join('<br>').split(' ').join('&nbsp;');
        txt.value = "";
        btn.innerHTML = x;
    }
});

Working Fiddle

我希望它至少能给你一些想法。