由一个项目需求引发的 - textarea中的换行和空格

TNFE 发布于2019-08-23 10:44 / 594人阅读

摘要：显示的时候，从后台获取到文本之后，去掉文中的所有空格，然后显示在标签里面。这里我用一个小例子来示意一下在各种情况下的保存和显示。首先尝试，去掉所有的空格，首先想到的就是方法。

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

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

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

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

标签里面。

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


    请输入内容：
    
    
    显示的内容：
    


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

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

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

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

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


    请输入内容：
    
    
    显示的内容：
    {{text2}}

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

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

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


    请输入内容：
    
    
    显示的内容：
    {{text2}}

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

替换空格保留换行

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

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


    请输入内容：
    
    
    显示的内容：
    


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

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

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

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

GPU云服务器云服务器 jsp中的换行怎么用 html5中的换行 python的换行 js和html的换行

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96636.html

由一个项目需求引发的 - textarea中的换行和空格

摘要：显示的时候，从后台获取到文本之后，去掉文中的所有空格，然后显示在标签里面。这里我用一个小例子来示意一下在各种情况下的保存和显示。首先尝试，去掉所有的空格，首先想到的就是方法。当我们使用 textarea 在前台编辑文字，并用 js 提交到后台的时候，空格和换行是我们最需要考虑的问题。在textarea 里面，空格和换行会被保存为/s和/n，如果我们前台输入和前台显示的文字都是在 te...

Cheriselalala 2019-08-02 11:09 评论0 收藏0
元素auto宽高的影响因素

摘要：关于内联元素之前讨论的多是块级元素，而没有考虑到内联元素的情况。但巧合的是，在普通流定位中，内联元素宽度和高度规则却和块级元素绝对定位差不多，都只受内容大小影响。我们知道，元素在没有设置宽高的情况下，默认的宽高值都为auto。而这个auto到底是如何让元素自动拥有宽高的呢，也就是说，元素的宽度和高度到底会受到什么因素的影响？本文将通过一个例子来对这一问题一探究竟，HTML结构和初始c...

crelaber 2019-08-30 13:01 评论0 收藏0
说一说“换行”踩的坑

摘要：虽然效果一样，但是这两种换行的方式使用起来却不同。使用换行这种方式用起来比较坑，所以本文章的重点就是这一部分。因为之前知道弹框中要实现换行，只能通过的方式，而不能通过的方式。在元素上使用等方式，发现都是可以实现换行的。前言最近遇到这样一个需求：需要在页面中显示一段第三方文本信息。这些文本完全由第三方自己定义，我们负责显示在页面即可，第三方要求这些文本需要换行显示即可。我们都知道在...

objc94 2019-08-21 10:44 评论0 收藏0
谈谈如何用CSS处理文本格式

摘要：一个长单词超出整个容器宽度时是否换行必须注意到，这是一个长单词便超出容器宽度的情况，而且只需考虑英文，中文没有此特性。规定如何处理内容溢出容器属性作用于型元素上。前言文本方面的CSS内容不少，但只要是用过一下office word来编辑过文章的童鞋都能轻易理解其中的大部分。那么，今天仅仅来谈谈其中最复杂的部分——文本格式。处理换行、空格和Tab：white-space 众所周知，...

source 2019-08-28 18:28 评论0 收藏0
去除inline-block元素间的间距

摘要：一现象描述真正意义上的水平呈现的元素间，换行显示或者空格隔开的情况下会有间距，这是因为浏览器在解析时，会将换行等读取成一个空格导致。链接链接链接链接给父级设置，然后再在子元素中设置我们的字体大小，这样也可以去掉元素间的间距。一、现象描述　　真正意义上的inline-block水平呈现的元素间，换行显示或者空格隔开的情况下会有间距，这是因为浏览器在解析时，会将换行等读取成一个空格导致。二、...

levius 2019-04-23 11:42 评论0 收藏0