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

Posted 2023-05-07

【中文标题】如何将空格和换行符从 TEXTAREA 转换为 html

【英文标题】：How to convert spaces and newlines from TEXTAREA to html

【发布时间】：2013-06-17 08:28:51

【问题描述】：

我需要将空格和换行符转换为 和 &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));
        ));
    );
);

【参考方案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

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

【讨论】：

不知道大家是否理解正确:) - jsfiddle.net/ynternet/BA6bc/2

@Patrik 这是默认发生的：/ 不是吗？ jsfiddle.net/venkateshwar/BA6bc/3

@Patrik 你想要这个吗？ jsfiddle.net/venkateshwar/BA6bc/4。签入浏览器的控制台/开发者工具。

@Patrik 这就是我在帖子中所做的。我只是给你的想法去做。不管怎样，看看这个fiddle。如果这不是您想要的，那么您在解释问题时并不清楚。

@Patrik 我认为<br/> 无效，因为即使我提到<br/>，chrome 浏览器也会将其转换为<br>。甚至提到  而不是&nbsp。