处理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中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
Dec 29 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
Canvas系列之滤镜效果
Feb 12 HTML / CSS
html5实现点击弹出图片功能
Jul 16 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
上海无线电三厂简史修改版
2021/03/01 无线电
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
CI框架表单验证实例详解
2016/11/21 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
python-numpy-指数分布实例详解
2019/12/07 Python
无工作经验者个人求职信范文
2013/12/22 职场文书
市场部管理制度
2014/02/02 职场文书
个人总结怎么写
2015/02/26 职场文书
撤诉书怎么写
2015/05/19 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
治庸问责工作总结
2015/08/11 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS