处理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 Backgrounds属性相关介绍
May 11 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
html5表单的required属性使用
Jul 07 HTML / CSS
css3中transform属性实现的4种功能
Aug 07 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 中文字符串首字母的获取函数分享
2013/11/04 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
不懂JavaScript应该怎样学
2008/04/16 Javascript
学习ExtJS form布局
2009/10/08 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
python调用私有属性的方法总结
2020/07/24 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
军人违纪检讨书
2014/02/04 职场文书
房产委托公证书样本
2014/04/04 职场文书
请假条范文大全
2014/04/10 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
护士求职信
2014/07/05 职场文书
抢劫罪辩护词
2015/05/21 职场文书