当我们运用 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 内里

这一步就很简朴了，直接点击提交，可以看到结果，以下图。在未做任何处置惩罚的情况下，保留了一切的空格和换行，合适保留再编辑。

不处置惩罚空格和换行 显现在 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>

不处置惩罚空格和换行 显现在 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()要领去掉文本前后的空格，用 <p> 标签把每段笔墨包裹起来，再把每一段用<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>');
}

以下图所示，基础完成自动缩进和保留换行啦。

下面我们输入一段诗歌，加上一些款式，看看终究结果怎样：

再输入一段文章，输入的时刻打乱文章的缩进，可以看到不论我们怎样缩进，显现结果一直都是缩进两个字符，那末就完成需求啦！