将换行符传给后台

将换行符传给后台在文本框中输入换行符传给后台的时候只能显示一个空格,怎么正确的传给后台,并且从后台读取之后再在前端正确显示?HTML代码如下:<textareaname=””id=”text”cols=”30″rows=”10″></textarea><divid=”div1″class=”div1″>ss</div>&…

大家好,又见面了,我是你们的朋友全栈君。

在文本框中输入换行符传给后台的时候只能显示一个空格,

怎么正确的传给后台,并且从后台读取之后再在前端正确显示?

HTML代码如下:

<textarea name="" id="text" cols="30" rows="10"></textarea>
    <div id="div1" class="div1">ss</div>
    <input type="button" value="copytext" name="" id="btn2">

通过console发现,换行符可以匹配’\n’,那么解题思路为,点击btn2的时候替换掉text中所有的\n,

用到两个知识点,正则RegExp和替换replace

 var textnode = document.getElementById('text');
    var btn2 = document.getElementById('btn2');
    var va;

    textnode.oninput=function(e){
        va= textnode.value;
    }

    btn2.onclick=function(){
        document.getElementById('div1').innerHTML= va.replace(RegExp("\n", "g"), "<br>")
    }

上面RegExp里面的g意思是全文匹配,

/**普及一下正则修饰符**/

i:忽略大小写,

g:全文查找所有匹配字符,

m:多行查找

gi/ig:全文查找,忽略大小写,

u:Unicode模式,

S :预定义模式,匹配所有不是空格的字符,

y:黏连修饰符,全局匹配,后一次匹配从上一次匹配成功的下一个位置开始;

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/142292.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • phpstrom 2021.1.3激活(JetBrains全家桶)

    (phpstrom 2021.1.3激活)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~4…

  • 虚函数指针sizeof不为sizeof(void*)

    虚函数指针sizeof不为sizeof(void*)

  • 十进制转换为二进制java_二进制转八进制算法

    十进制转换为二进制java_二进制转八进制算法将十进制转换为二进制将二进制转换为十进制1.将十进制转换为二进制:思路:对十进制的数进行除2取余法:/***讲10进制转化为二进制*@paramde:待转换的十进制*@return:转换后的二进制(string)*/publicstaticStringDecimal2Binary(intde){

    2022年10月18日
  • 钟表代码分享

    今天分享一个时钟的源码,效果如图所示:最后附上源码<!DOCTYPEhtml><html><head><metahttp-equiv=”Content-Type”content=”text/html;charset=UTF-8″><title>时钟</title><styletype=”text/c…

  • Springboot源码结构预览「建议收藏」

    Springboot源码结构预览「建议收藏」系列文章目录Springboot学习系列一、Springboot源码结构预览二、Springboot运行原理三、Springboot源码流程构造分析四、Springboot运行流程构造分析五、SpringbootWeb应用源码解析文章目录系列文章目录概述二、Springboot源码1.源码获取2.源码调试3.目录结构3.目录结构总结学习目标:学习内容:学习时间:学习产出:概述Springboot源码获取、调试、目录结构、设计理念、整体架构。二、Springboot源码1.源

  • Vue电商后台管理系统功能展示

    Vue电商后台管理系统功能展示项目技术:html、css、javascript、node.js、vue、mysql项目描述:电商后台管理系统,主要功能包括:用户账号管理、商品分类、商品信息、订单、数据统计等业务功能。采用前后端分离的开发模式,其中前端项目是基于Vue技术栈的SPA项目,通过API接口连接服务器,访问mysql数据库。成品效果展示:一、登陆界面二、登陆校验规则三、登陆成功后,保存Token四、用户管理页面五、添加用户功能(采用正则表达式进行校验)六、添加用户成功,弹出消息框.

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号