怎么在textarea中处理换行和空格-创新互联

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

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

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

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

替换空格保留换行

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

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

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


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

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

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

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

以上就是怎么在textarea中处理换行和空格，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。