文章目录
- 前言
- 换行符介绍
- JavaScript部分
- html部分
- 实时获取值
- 清除值
- replace
前言
textarea
标签本身不识别换行功能,回车换行用的是\n
换行符,输入时的确有换行的效果,但是渲染时就只是一个空格了。这时就需要利用换行符\n
和br
标签的转换进行处理。
换行符介绍
表格
序号 | 字符/标签 | 描述 |
---|---|---|
1 | | 换行(Line Feed),也表示\n |
2 | | 回车(Carriage Return),也表示\r |
3 | \n | 换行(Line Feed),也表示 |
4 | \r | 回车(Carriage Return),也表示 |
5 | br | <br> 元素在文本中生成一个换行(回车)符号。此元素在写诗和地址时很有用,这些地方的换行都非常重要。 |
与 的区别
在不同的操作系统中,换行符的表示方式不一样。在
unix
系统中,换行符使用\n
;在windows
系统中换行使用\r\n
;在旧版macOS
中换行使用回车符\r
,在新版macOS
中使用与unix
系统相同的换行方式。
\n与\r的区别
关于回车(Carriage Return)和换行(Line Feed)这两个概念的来历和区别。
在计算机还没有出现之前,有一种叫做电传打字机(Teletype Model 33)的玩意,每秒钟可以打10
个字符。但是它有一个问题,就是打完一行换行的时候,要用去0.2
秒,正好可以打两个字符。要是在这0.2
秒里面,又有新的字符传过来,那么这个字符将丢失。
于是,研制人员想了个办法解决这个问题,就是在每行后面加两个表示结束的字符。一个叫做回车,告诉打字机把打印头定位在左边界;另一个叫做换行,告诉打字机把纸向下移一行。这就是换行和回车的来历,从它们的英语名字上也可以看出一二。
后来,计算机发明了,这两个概念也就被般到了计算机上。那时,存储器很贵,一些科学家认为在每行结尾加两个字符太浪费了,加一个就可以。于是,就出现了分歧。
Unix
系统里,每行结尾只有换行,即\n
;Windows
系统里面,每行结尾是换行和回车,即\n\r
;Mac
系统里,每行结尾是回车,一个直接后果是Unix/Mac
系统下的文件在Windows
里打开的话,所有文字会变成一行;而Windows
里的文件在Unix/Mac
下打开的话,在每行的结尾可能会多出一个^M
符号。
br
<br>
可插入一个简单的换行符。
<br>
标签是空标签,意味着它没有结束标签,因此这是错误的写法:<br></br>
。在XHTML
中,把结束标签放在开始标签中,也就是<br>
。
注意<br>
标签只是简单地开始新的一行,而当浏览器遇到<p>
标签时,通常会在相邻的段落之间插入一些垂直的间距。
JavaScript部分
在
textarea
中输入换行时,换行符是\n
在html
页面中显示换行时,使用的是br
标签
所以解决这个问题的思路也很简单,就是在前端页面中,将\n
转换成br
标签即可。
替换可以在数据提交阶段,也可以在数据渲染阶段,此文章使用了渲染阶段的替换方式。let str = res.info.replace(/\n/g, '<br>'); this.str = str;
html部分
经过之前对字符串的处理,最终获取到的数据
123<br>456
。然后只需要通过vue
中的v-html
指令或JavaScript
中的innerHTML
方法将br
标签渲染出来即可。<div v-html="str"></div>
idA.innerHTML = str;
实时获取值
<textarea
id="idTextarea"
cols="56"
rows="6"
onclick="onTextarea(event)"
ondblclick="onTextarea(event)"
>
</textarea>
// 禁止元素上发生鼠标点击时触发
// 禁止元素上发生鼠标双击时触发
// 禁止事件冒泡
function onTextarea(event) {
event.stopPropagation();
}
// 实时获取输入值
idTextarea.oninput = (event) => {
let value = event.target.value;
value = value.replace(/\n/g, '<br>');
textareaVal = value;
}
清除值
方法一
document.querySelector('#idTextarea').innerHTML = '';
方法二
document.querySelector('#idTextarea').value = '';
方法一在我自己的项目中无效,所以使用了方法二。按理来说方法一应该是没啥问题,但是在我自己的项目中有问题了。
replace
w3school
replace
方法在字符串中搜索值或正则表达式。
replace
方法返回已替换值的新字符串。
replace
方法不会更改原始字符串。
如果您替换值,则只会替换第一个实例。如需替换所有实例,请使用带有g
修饰符集的正则表达式。
MDN
replace
方法返回一个由替换值(replacement
)替换部分或所有的模式(pattern
)匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式,替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern
是字符串,则仅替换第一个匹配项。