处理textarea中的换行和空格


Posted in HTML / CSS onDecember 12, 2019

当我们使用 textarea 在前台编辑文字,并用 js 提交到后台的时候,空格和换行是我们最需要考虑的问题。在textarea 里面,空格和换行会被保存为/s/n,如果我们前台输入和前台显示的文字都是在 textarea 里面,其实并不需要做任何处理,你在 textarea 里面编写的样式会按照你之前编辑时候的样式,正确的显示出来。

那么如果你需要 textarea 编辑提交的文字,从后台返回之后,不是显示在 textarea 里面,那么就需要考虑处理空格和换行啦。

其实之前在接触的时候,完全没有考虑过这些问题,也是因为最近做的项目里面有一个这样子的需求,要求用户在 textarea 输入文字,提交之后以文章的格式显示在页面上。不管用户输入的时候打了多少空格,默认每段文字都只缩进2个字符,且要考虑用户上传的诗歌形式,也就是每个段落之间可能有两行空白。总而言之一句话总结呢,就是—去掉用户的输入的空格,保留段落之间的换行。

那么我最终的做法就是,在保存的时候还是不做任何处理,直接保存到后台。显示的时候,从后台获取到文本之后,去掉文中的所有空格,然后显示在<pre>标签里面。

这里我用一个小例子来示意一下textarea在各种情况下的保存和显示。首先创建一个简单的 html 页面,为了方便获取数据和显示,我引入 vue 来处理数据,给提交按钮绑定一个点击事件,点击确定之后,显示在下面。基本的页面结构和 js 如下:

<div class="app">
    <p>请输入内容:</p>
    <textarea name="t1" rows="8" cols="80" v-model="text1"></textarea>
    <button>提交</button>
    <p>显示的内容:</p>
    <textarea name="t2" id="" cols="80" rows="8" v-model="text2"></textarea>
</div>

// js部分
const vm = new Vue({
    el:'#app',
    data:{
        text1:'',
        text2:''
    },
    methods:{
        submitText(){
            this.text2 = this.text1;
        }
    }
})

不处理空格和换行 显示在 textarea 里面

这一步就很简单了,直接点击提交,可以看到效果,如下图。在未做任何处理的情况下,保留了所有的空格和换行,适合保存再编辑。

处理textarea中的换行和空格

不处理空格和换行 显示在 div 里面

把刚刚第二个 textarea 替换成 div ,效果如下图。可以看到空格和换行符都没有被处理出来,直接被忽略掉了。

<div id="app">
    <p>请输入内容:</p>
    <textarea name="t1" rows="8" cols="80" v-model="text1" ></textarea>
    <button @click="submitText">提交</button>
    <p>显示的内容:</p>
    <p>{{text2}}</p>
</div>

处理textarea中的换行和空格

不处理空格和换行 显示在 pre 标签里面

将 div 替换成 pre 标签,将提交的文本显示在 pre 标签里面。pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符,他比较常见的应用就是用来显示代码,在技术网站和博客的页面里面,pre 标签都是用来包裹代码块的。

可以从下图的效果看出,pre 标签也可以完全实现保留用户所输入的空格和换行,看上去似乎能够达到我的基本需求了。那么接下来的问题就是,如何去掉空格,并且实现自动缩进2个字符。

<div id="app">
    <p>请输入内容:</p>
    <textarea name="t1" rows="8" cols="80" v-model="text1" ></textarea>
    <button @click="submitText">提交</button>
    <p>显示的内容:</p>
    <pre>{{text2}}</pre>
</div>

那么我试试直接给 pre 标签设置 css 属性text-index:2em;?这样能够实现需求吗?答案显然是不行,因为这个属性规定的是块级元素首行文本的缩进,而这里从始至终都只有一个块级元素 pre ,显然是不能实现。而且我们还要考虑到用户自己输入的空格。

替换空格保留换行

既然直接显示行不通,看来还是必须要处理文本,那我们就处理一下。首先尝试,去掉所有的空格,首先想到的就是trim()方法。思路就是,以换行符为分割,获取到每一段文本,然后用trim()方法去掉文本前后的空格,用

标签把每段文字包裹起来,再把每一段用<br>换行标签拼接起来。同时,不用pre标签来显示文本了,直接将处理过后的的 html 片段插入到 div 标签里面,这里用到的是 vue 的 v-html 属性。

<div id="app">
    <p>请输入内容:</p>
    <textarea name="t1" rows="8" cols="80" v-model="text1" ></textarea>
    <button @click="submitText">提交</button>
    <p>显示的内容:</p>
    <div v-html="text2" style="text-indent:2em;"></div>
</div>

// js部分
submitText(){
    let arr = [];
    this.text1.split('\n').forEach(item=>arr.push(`<p>${item.trim()}</p>`));
    this.text2 = arr.join('<br>');
}

如下图所示,基本实现自动缩进和保留换行啦。

处理textarea中的换行和空格

下面我们输入一段诗歌,加上一些样式,看看最终效果如何:

处理textarea中的换行和空格

再输入一段文章,输入的时候打乱文章的缩进,可以看到不管我们如何缩进,显示效果始终都是缩进两个字符,那么就实现需求啦!

处理textarea中的换行和空格

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
需要知道的CSS3动画技术
Jan 01 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 #HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 #HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 #HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 #HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 #HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 #HTML / CSS
web字体加载方案优化小结
Nov 29 #HTML / CSS
You might like
浅析php中jsonp的跨域实例
2013/06/21 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
一年级班主任寄语
2014/01/19 职场文书
公益广告标语
2014/06/19 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
涨价通知怎么写
2015/04/23 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
尊师重教主题班会
2015/08/14 职场文书
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL