如何让带有换行符的文本在div中也能换行显示

Posted 2023-03-25

1.replace可以和正则表达式结合,一次替换所有的\r\n。

var reg=new RegExp("\r\n","g");
str= str.replace(reg,"
");

　　这样str中所有的\r\n就替换成＜br＞了.然后可以将其存入数据库。

　　在取出的时候 只用将值在替换回来即可

var reg=new RegExp("＜br＞","g");
stt= str.replace(reg,"\r\n");
document.getElementByIdx_x("textarea").value=str;

　　更加详细的分析和应用可以参考javascript的replace方法与正则表达式结合应用讲解

　　下面是我写的2个函数 直接放到通用包中 以后使用可以替换

function replaceTextarea1(str)
var reg=new RegExp("\r\n","g");
var reg1=new RegExp(" ","g");

str = str.replace(reg,"＜br＞");
str = str.replace(reg1,"＜p＞");

return str;


function replaceTextarea2(str)
var reg=new RegExp("＜br＞","g");
var reg1=new RegExp("＜p＞","g");

str = str.replace(reg,"\r\n");
str = str.replace(reg1," ");

return str;
参考技术A white-space:pre-wrap

Vue插值文本换行问题

问题背景：

后端返回的字符串带有 换行符，但Vue将其插值渲染成div内部文本后，文本并不换行，换行符显示为一个空格。

 

目标：

让文本在换行符处换行。

 

解决方法：

思路：实现文本换行有两种方法，一是HTML方法，即<br>标签；二是CSS方法，即white-space属性。

方法1. 使用v-html

   首先，将字符串里的 替换为<br>，然后用v-html指令渲染字符串为innerHTML。

// JS部分
this.text = res.data.replace(/
/g, ‘<br>‘)

// HTML部分
<div v-html="text"></div>

  这种方法比较麻烦，而且存在安全问题，故不推荐使用。

 

方法2. 设置white-space属性（推荐）

  将div容器的white-space属性设置为pre-wrap即可解决问题。

// CSS部分
.text-wrapper {
  white-space: pre-wrap;
}

// HTML部分
<div class="text-wrapper">{{text}}</div>

pre-wrap值的意思是保留空白并且正常换行。

white-space各属性值详见这里。其实设置为pre即可使换行符发挥作用，但这时文本在div宽度不足时不会自动换行，而是撞破边界延伸到div外部去，所以还得加上wrap。