App下載

textarea中的換行和空格處理方法總結(jié)!

寶藏少女 2021-08-10 16:10:09 瀏覽數(shù) (7720)
反饋

今天小編和大家講講有關(guān)于“textarea中的換行和空格處理方法總結(jié)!”這方面的相關(guān)內(nèi)容!當(dāng)我們使用 textarea 在前臺(tái)編輯文字,并用 js 提交到后臺(tái)的時(shí)候,空格和換行是我們最需要考慮的問題。

在textarea 里面,空格和換行會(huì)被保存為/s/n,如果我們前臺(tái)輸入和前臺(tái)顯示的文字都是在 textarea 里面,其實(shí)并不需要做任何處理,你在 textarea 里面編寫的樣式會(huì)按照你之前編輯時(shí)候的樣式,正確的顯示出來。

那么如果你需要 textarea 編輯提交的文字,從后臺(tái)返回之后,不是顯示在 textarea 里面,那么就需要考慮處理空格和換行啦。

其實(shí)之前在接觸的時(shí)候,完全沒有考慮過這些問題,也是因?yàn)樽罱龅捻?xiàng)目里面有一個(gè)這樣子的需求,要求用戶在 textarea 輸入文字,提交之后以文章的格式顯示在頁面上。不管用戶輸入的時(shí)候打了多少空格,默認(rèn)每段文字都只縮進(jìn)2個(gè)字符,且要考慮用戶上傳的詩歌形式,也就是每個(gè)段落之間可能有兩行空白??偠灾痪湓捒偨Y(jié)呢,就是—去掉用戶的輸入的空格,保留段落之間的換行。

那么我最終的做法就是,在保存的時(shí)候還是不做任何處理,直接保存到后臺(tái)。顯示的時(shí)候,從后臺(tái)獲取到文本之后,去掉文中的所有空格,然后顯示在<pre>標(biāo)簽里面。

這里我用一個(gè)小例子來示意一下textarea在各種情況下的保存和顯示。首先創(chuàng)建一個(gè)簡(jiǎn)單的 html 頁面,為了方便獲取數(shù)據(jù)和顯示,我引入 vue 來處理數(shù)據(jù),給提交按鈕綁定一個(gè)點(diǎn)擊事件,點(diǎn)擊確定之后,顯示在下面。基本的頁面結(jié)構(gòu)和 js 如下:

<div class="app">
    <p>請(qǐng)輸入內(nèi)容:</p>
    <textarea name="t1" rows="8" cols="80" v-model="text1"></textarea>
    <button>提交</button>
    <p>顯示的內(nèi)容:</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 里面

這一步就很簡(jiǎn)單了,直接點(diǎn)擊提交,可以看到效果,如下圖。在未做任何處理的情況下,保留了所有的空格和換行,適合保存再編輯。

不處理空格和換行 顯示在 div 里面

把剛剛第二個(gè) textarea 替換成 div ,效果如下圖。可以看到空格和換行符都沒有被處理出來,直接被忽略掉了。

<div id="app">
    <p>請(qǐng)輸入內(nèi)容:</p>
    <textarea name="t1" rows="8" cols="80" v-model="text1" ></textarea>
    <button @click="submitText">提交</button>
    <p>顯示的內(nèi)容:</p>
    <p>{{text2}}</p>
</div>

不處理空格和換行 顯示在 pre 標(biāo)簽里面

將 div 替換成 pre 標(biāo)簽,將提交的文本顯示在 pre 標(biāo)簽里面。pre 元素可定義預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符,他比較常見的應(yīng)用就是用來顯示代碼,在技術(shù)網(wǎng)站和博客的頁面里面,pre 標(biāo)簽都是用來包裹代碼塊的。

可以從下圖的效果看出,pre 標(biāo)簽也可以完全實(shí)現(xiàn)保留用戶所輸入的空格和換行,看上去似乎能夠達(dá)到我的基本需求了。那么接下來的問題就是,如何去掉空格,并且實(shí)現(xiàn)自動(dòng)縮進(jìn)2個(gè)字符。

<div id="app">
    <p>請(qǐng)輸入內(nèi)容:</p>
    <textarea name="t1" rows="8" cols="80" v-model="text1" ></textarea>
    <button @click="submitText">提交</button>
    <p>顯示的內(nèi)容:</p>
    <pre>{{text2}}</pre>
</div>

那么我試試直接給 pre 標(biāo)簽設(shè)置 css 屬性text-index:2em;?這樣能夠?qū)崿F(xiàn)需求嗎?答案顯然是不行,因?yàn)檫@個(gè)屬性規(guī)定的是塊級(jí)元素首行文本的縮進(jìn),而這里從始至終都只有一個(gè)塊級(jí)元素 pre ,顯然是不能實(shí)現(xiàn)。而且我們還要考慮到用戶自己輸入的空格。

替換空格保留換行

既然直接顯示行不通,看來還是必須要處理文本,那我們就處理一下。首先嘗試,去掉所有的空格,首先想到的就是trim()方法。思路就是,以換行符為分割,獲取到每一段文本,然后用trim()方法去掉文本前后的空格,用

標(biāo)簽把每段文字包裹起來,再把每一段用<br>換行標(biāo)簽拼接起來。同時(shí),不用pre標(biāo)簽來顯示文本了,直接將處理過后的的 html 片段插入到 div 標(biāo)簽里面,這里用到的是 vue 的 v-html 屬性。

<div id="app">
    <p>請(qǐng)輸入內(nèi)容:</p>
    <textarea name="t1" rows="8" cols="80" v-model="text1" ></textarea>
    <button @click="submitText">提交</button>
    <p>顯示的內(nèi)容:</p>
    <div v-html="text2" style="text-indent:2em;"></div>
</div>

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

如下圖所示,基本實(shí)現(xiàn)自動(dòng)縮進(jìn)和保留換行啦。

下面我們輸入一段詩歌,加上一些樣式,看看最終效果如何:

再輸入一段文章,輸入的時(shí)候打亂文章的縮進(jìn),可以看到不管我們?nèi)绾慰s進(jìn),顯示效果始終都是縮進(jìn)兩個(gè)字符,那么就實(shí)現(xiàn)需求啦!

那么在上文中我們所說的都是有關(guān)于“textarea中的換行和空格處理方法總結(jié)!”這方面的相關(guān)內(nèi)容!希望對(duì)大家的學(xué)習(xí)有所幫助,當(dāng)然也希望大家可以在W3Cschool這個(gè)網(wǎng)站中學(xué)習(xí)有所收獲。


0 人點(diǎn)贊