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