您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)怎么在textarea中處理?yè)Q行和空格,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說(shuō),跟著小編一起來(lái)看看吧。
<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 ,效果如下圖??梢钥吹娇崭窈蛽Q行符都沒有被處理出來(lái),直接被忽略掉了。
<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)用就是用來(lái)顯示代碼,在技術(shù)網(wǎng)站和博客的頁(yè)面里面,pre 標(biāo)簽都是用來(lái)包裹代碼塊的。
可以從下圖的效果看出,pre 標(biāo)簽也可以完全實(shí)現(xiàn)保留用戶所輸入的空格和換行,看上去似乎能夠達(dá)到我的基本需求了。那么接下來(lái)的問(wèn)題就是,如何去掉空格,并且實(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)。而且我們還要考慮到用戶自己輸入的空格。
替換空格保留換行
既然直接顯示行不通,看來(lái)還是必須要處理文本,那我們就處理一下。首先嘗試,去掉所有的空格,首先想到的就是trim()
方法。思路就是,以換行符為分割,獲取到每一段文本,然后用trim()
方法去掉文本前后的空格,用
標(biāo)簽把每段文字包裹起來(lái),再把每一段用<br>
換行標(biāo)簽拼接起來(lái)。同時(shí),不用pre
標(biāo)簽來(lái)顯示文本了,直接將處理過(guò)后的的 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('\n').forEach(item=>arr.push(`<p>${item.trim()}</p>`)); this.text2 = arr.join('<br>'); }
如下圖所示,基本實(shí)現(xiàn)自動(dòng)縮進(jìn)和保留換行啦。
下面我們輸入一段詩(shī)歌,加上一些樣式,看看最終效果如何:
再輸入一段文章,輸入的時(shí)候打亂文章的縮進(jìn),可以看到不管我們?nèi)绾慰s進(jìn),顯示效果始終都是縮進(jìn)兩個(gè)字符,那么就實(shí)現(xiàn)需求啦!
以上就是怎么在textarea中處理?yè)Q行和空格,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。