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

let text = el.innerHTML; // // 富文本内容即是html字符串
// console.log("去除图片img标签前：", text);
// 过滤掉字符串中的 img 标签
let imgReg = /<(img|input|br|hr|p|video)[^>]*>/gi; // 匹配图片中的img、input等标签
// let arr = text.match(imgReg); // 筛选出所有的img
text = text.replaceAll(imgReg, ""); // replaceAll 替换符合条件的内容为空串
// console.log("去除图片img标签后：", text);

let text = el.innerHTML; // 富文本内容即是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; // 因为 text 可能被改变，例如被除去了img标签，所以需要重新赋值
    }

let text = el.innerHTML; // 富文本内容即是html字符串
if (text.length > num) {
  let numNew = num;
  const subText = text.substr(0, num);
  const n = subText.match(/[0-9]/g) || []; // 统计数字
  const e = subText.match(/[a-z]/g) || []; // 统计小写字母
  // 小写英文字母数字占字符串的70%以上，截取长度增加：主要考虑全英文场景页面占宽问题
  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; // 因为 text 可能被改变，例如被除去了img标签
}

import Vue from "vue";
/**
 * 文本溢出截取，截取指定长度字符串，超出指定长度省略并展示...，未超出则不处理。
 * 弊端：对宽度响应式变化的页面展示效果不友好。
 *
 * @param el 指令作用的元素
 * @param binding 绑定的内容 binding.value.num 是指定要截取的字符串长度。
 */
function overflowSubstr(el, binding) {
  Vue.nextTick(() => {
    // console.log(binding.value);
    const num = binding.value.num || 120;
    let text = el.innerHTML;
    // console.log("去除图片img标签前：", text);
    // 过滤掉字符串中的 img 标签
    let imgReg = /<(img|input|br|hr|p|video)[^>]*>/gi; // 匹配图片中的img、input等标签
    // let arr = text.match(imgReg); // 筛选出所有的img
    text = text.replaceAll(imgReg, "");
    // console.log("去除图片img标签后：", text);
    // 设置溢出隐藏（overflow = "hidden"）
    // 将末尾的三个文字用...取代
    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) || []; // 统计数字
      const e = subText.match(/[a-z]/g) || []; // 统计小写字母
      // 小写英文字母数字占字符串的70%以上，截取长度增加：主要考虑全英文场景页面占宽问题
      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; // 因为 text 可能被改变，例如被除去了img标签
    }
  });
}
// 文本溢出省略指令
Vue.directive("overflowSubstr", overflowSubstr);

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

<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>