全国服务热线:4008-888-888

技术知识

解决textarea中的换行和空格

当大家应用 textarea 在前台接待编写文本,并用 js 递交到后台管理的情况下,空格和换行是大家最必须考虑到的难题。在textarea 里边,空格和换行会被储存为/s/n,假如大家前台接待键入和前台接待显示信息的文本全是在 textarea 里边,实际上其实不必须做任何解决,你在 textarea 里边撰写的款式会依照你以前编写情况下的款式,正确的显示信息出来。

那末假如你必须 textarea 编写递交的文本,从后台管理回到以后,并不是显示信息在 textarea 里边,那末就必须考虑到解决空格和换行啦。

实际上以前在触碰的情况下,彻底沒有考虑到过这些难题,也是由于近期做的新项目里边有1个这模样的要求,规定客户在 textarea 键入文本,递交以后以文章内容的文件格式显示信息在网页页面上。无论客户键入的情况下打了是多少空格,默认设置每段文本都只缩进2个标识符,且要考虑到客户提交的诗歌方式,也便是每一个段落之间将会有两行空白。总而言之1句话总结呢,便是—去掉客户的键入的空格,保存段落之间的换行。

那末我最后的做法便是,在储存的情况下還是不做任何解决,立即储存到后台管理。显示信息的情况下,从后台管理获得到文字以后,去掉文中的全部空格,随后显示信息在<pre>标识里边。

这里我用1个小事例来示意1下textarea在各种各样状况下的储存和显示信息。最先建立1个简易的 html 网页页面,以便便捷获得数据信息和显示信息,我引进 vue 来解决数据信息,给递交按钮关联1个点一下恶性事件,点一下明确以后,显示信息在下面。基础的网页页面构造和 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 里边

这1步就很简易了,立即点一下递交,能够看到实际效果,以下图。在未做任何解决的状况下,保存了全部的空格和换行,合适储存再编写。

不解决空格和换行 显示信息在 div 里边

把不久第2个 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 元素中的文字一般会保存空格和换行符,他较为普遍的运用便是用来显示信息编码,在技术性网站和blog的网页页面里边,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;?这样可以完成要求吗?回答明显是不好,由于这个特性要求的是块级元素首写作本的缩进,而这里至始至终都仅有1个块级元素 pre ,明显是不可以完成。并且大家还要考虑到到客户自身键入的空格。

更换空格保存换行

既然立即显示信息行堵塞,来看還是务必要解决文字,那大家就解决1下。最先尝试,去掉全部的空格,最先想起的便是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>');
}

以下图所示,基础完成全自动缩进和保存换行啦。

下面大家键入1段诗歌,再加1些款式,看看最后实际效果怎样:

再键入1段文章内容,键入的情况下打乱文章内容的缩进,能够看到无论大家怎样缩进,显示信息实际效果自始至终全是缩进两个标识符,那末就完成要求啦!

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服