vue?指令版富文本溢出省略截取示例詳解

更新時(shí)間：2022年09月06日 08:38:33 作者：靈扁扁

這篇文章主要為大家介紹了vue?指令版富文本溢出省略截取示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

一、需求描述

文本溢出省略，說(shuō)實(shí)話(huà)這些年也實(shí)踐過(guò)很多了，這次是針對(duì)富文本字符串，思量想去，也曾試圖了解一些知名站點(diǎn)的實(shí)現(xiàn)方案，但結(jié)果不甚理想。

今天記錄的這一版也并不完美，好在也能勉強(qiáng)解決問(wèn)題。

大體需求就是：針對(duì)富文本字符串，即 html 字符串，實(shí)現(xiàn)文本溢出省略，并使用... + 【查看全文】結(jié)尾。

需求重點(diǎn)分析：

① 針對(duì)的是富文本字符串，html 字符串，所以需要特別處理掉 img、input、video、內(nèi)聯(lián)樣式等內(nèi)容。但不能去除全部html標(biāo)簽，因?yàn)闀?huì)有對(duì)檢索關(guān)鍵字標(biāo)紅的需求。

②需要實(shí)現(xiàn)溢出省略并使用... 和【查看全文】結(jié)尾

③需要考慮兼容IE（IE退役了，但是能決定要兼容IE的人還在...）

④需要考慮單個(gè)中英文所占寬度的區(qū)別，也就是當(dāng)內(nèi)容是全英文的時(shí)候，溢出省略效果應(yīng)當(dāng)和中文差不多，看起來(lái)比較和諧。

⑤能跟隨寬度的響應(yīng)式變化而變化，省略效果最好保持一致。

二、實(shí)現(xiàn)思路

2.1 正則表達(dá)式過(guò)濾 img、video等標(biāo)簽

利用正則過(guò)濾 img、video等標(biāo)簽。如果不過(guò)濾，在列表首頁(yè)這樣的概覽場(chǎng)景，會(huì)顯得很奇怪，圖片之類(lèi)的內(nèi)容應(yīng)當(dāng)去詳情或全文這樣的細(xì)覽場(chǎng)景中查看。

let text = el.innerHTML; // // 富文本內(nèi)容即是html字符串
// console.log("去除圖片img標(biāo)簽前：", text);
// 過(guò)濾掉字符串中的 img 標(biāo)簽
let imgReg = /<(img|input|br|hr|p|video)[^>]*>/gi; // 匹配圖片中的img、input等標(biāo)簽
// let arr = text.match(imgReg); // 篩選出所有的img
text = text.replaceAll(imgReg, ""); // replaceAll 替換符合條件的內(nèi)容為空串
// console.log("去除圖片img標(biāo)簽后：", text);

2.2 截取固定長(zhǎng)度的字符數(shù)

對(duì)內(nèi)容截取固定長(zhǎng)度的字符數(shù)。截取固定字符數(shù)，顯然是有弊端的文本溢出省略方案，因?yàn)闊o(wú)法良好的跟隨寬度變化而變化。

盡管我們自己可以通過(guò)一些操作通過(guò)監(jiān)聽(tīng)寬度范圍而指示截取對(duì)應(yīng)合適的長(zhǎng)度，但這顯然沒(méi)有-webkit-box，-webkit-line-clamp的處理方式來(lái)得方便。但是很遺憾，兼容IE成為了攔路虎。所以，暫時(shí)還是選擇了截取固定字符數(shù)來(lái)處理文本溢出省略。

let text = el.innerHTML; // 富文本內(nèi)容即是html字符串
if (text.length > num) {
      let numNew = num;
      const subText = text.substr(0, num);
      el.innerHTML = text.substr(0, numNew - 3) + "...";
    } else {
      el.innerHTML = text; // 因?yàn)?text 可能被改變，例如被除去了img標(biāo)簽，所以需要重新賦值
    }

2.3 考慮小寫(xiě)英文字符和數(shù)字寬度問(wèn)題

因?yàn)闀?huì)有全文英文的場(chǎng)景，所以得考慮相同字符數(shù)，小寫(xiě)字母和數(shù)字的寬度占比是比中文小的的問(wèn)題。為此，決定為給全英文的文本，增加顯示的字符數(shù)，以求全英文和全中文場(chǎng)景的文本溢出省略效果基本一致，看起來(lái)自然和諧一些。

這主要是通過(guò)正則表達(dá)式，統(tǒng)計(jì)小寫(xiě)英文字母和數(shù)字在文本中的占比，來(lái)考慮適當(dāng)增加顯示的字符數(shù)。

let text = el.innerHTML; // 富文本內(nèi)容即是html字符串
if (text.length > num) {
  let numNew = num;
  const subText = text.substr(0, num);
  const n = subText.match(/[0-9]/g) || []; // 統(tǒng)計(jì)數(shù)字
  const e = subText.match(/[a-z]/g) || []; // 統(tǒng)計(jì)小寫(xiě)字母
  // 小寫(xiě)英文字母數(shù)字占字符串的70%以上，截取長(zhǎng)度增加：主要考慮全英文場(chǎng)景頁(yè)面占寬問(wèn)題
  if (n.length + e.length > 0.7 * num) {
    numNew = num + (n.length + e.length);
  }
  el.innerHTML = text.substr(0, numNew - 3) + "...";
} else {
  el.innerHTML = text; // 因?yàn)?text 可能被改變，例如被除去了img標(biāo)簽
}

2.4 注冊(cè)為全局指令

因?yàn)槭?Vue 項(xiàng)目，干脆就注冊(cè)為全局指令算了。這樣使用起來(lái)也方便些。為了方便指定顯示的字符數(shù)，設(shè)置了支持自定義數(shù)量的 num 屬性。

下面是完整的文本溢出省略函數(shù)，注冊(cè)為vue 全局指令的內(nèi)容。

// directives.js 全局指令文件

import Vue from "vue";
/**
 * 文本溢出截取，截取指定長(zhǎng)度字符串，超出指定長(zhǎng)度省略并展示...，未超出則不處理。
 * 弊端：對(duì)寬度響應(yīng)式變化的頁(yè)面展示效果不友好。
 *
 * @param el 指令作用的元素
 * @param binding 綁定的內(nèi)容 binding.value.num 是指定要截取的字符串長(zhǎng)度。
 */
function overflowSubstr(el, binding) {
  Vue.nextTick(() => {
    // console.log(binding.value);
    const num = binding.value.num || 120;
    let text = el.innerHTML;
    // console.log("去除圖片img標(biāo)簽前：", text);
    // 過(guò)濾掉字符串中的 img 標(biāo)簽
    let imgReg = /<(img|input|br|hr|p|video)[^>]*>/gi; // 匹配圖片中的img、input等標(biāo)簽
    // let arr = text.match(imgReg); // 篩選出所有的img
    text = text.replaceAll(imgReg, "");
    // console.log("去除圖片img標(biāo)簽后：", text);
    // 設(shè)置溢出隱藏（overflow = "hidden"）
    // 將末尾的三個(gè)文字用...取代
    if (!text) return;
    el.style.overflow = "hidden";
    if (text.length > num) {
      let numNew = num;
      const subText = text.substr(0, num);
      const n = subText.match(/[0-9]/g) || []; // 統(tǒng)計(jì)數(shù)字
      const e = subText.match(/[a-z]/g) || []; // 統(tǒng)計(jì)小寫(xiě)字母
      // 小寫(xiě)英文字母數(shù)字占字符串的70%以上，截取長(zhǎng)度增加：主要考慮全英文場(chǎng)景頁(yè)面占寬問(wèn)題
      if (n.length + e.length > 0.7 * num) {
        numNew = num + (n.length + e.length);
      }
      el.innerHTML = text.substr(0, numNew - 3) + "...";
    } else {
      el.innerHTML = text; // 因?yàn)?text 可能被改變，例如被除去了img標(biāo)簽
    }
  });
}
// 文本溢出省略指令
Vue.directive("overflowSubstr", overflowSubstr);

directives.js 在入口文件 main.js 引入，即可使全局指令生效。

自定義指令 v-overflow-substr 的使用，類(lèi)似常規(guī)指令的使用，例如下面這樣：

<div
  v-overflow-substr="{ num: num }"
  v-html="item.content"
></div>

2.5 文本尾部添加【查看全文】或【收起】

這個(gè)需求點(diǎn)的大致思路是，在尾部添加一個(gè)span標(biāo)簽，用以顯示 "收起" 或 "查看全文"。因?yàn)橐獑为?dú)控制每一條數(shù)據(jù)的展開(kāi)收齊，所以需要給每條數(shù)據(jù)增加一個(gè)是否展示全部的字段 showAll，用以進(jìn)行展開(kāi)或收齊操作。

需要注意的一點(diǎn)是，展開(kāi)的時(shí)候展示的是完整的內(nèi)容，就是說(shuō)可能包含圖片視頻的完整文本，因此要注意切換文本內(nèi)容。下面是部分關(guān)鍵代碼。

<span
        v-if="item.content && item.content.length > num"
        @click="checkAll(item)"
        class="all-btn"
>
    {{ item.showAll ? "收起" : "查看全文" }}
    <i
        :class="{
            'el-icon-arrow-down': !item.showAll,
             'el-icon-arrow-up': item.showAll,
         }"
    ></i>
</span>