vue项目富文本编辑器输入格式化以计算总字数

最新推荐文章于 2025-11-10 02:52:54 发布

原创最新推荐文章于 2025-11-10 02:52:54 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文档探讨了在富文本编辑器中如何处理包含HTML格式的输入信息，以及如何排除特殊字符（如<>&）的影响，确保准确计算字数。通过设置htmlState和specialState标志，对字符串进行遍历，实现对HTML标签和特殊字符的识别，从而在计算字数时忽略它们。

在使用富文本编辑器时，v-model存储输入信息，此时输入信息会包含html格式，影响字数计算

另外特殊字符比如< > &也需要格式化

还有空格不能计算为字数

所以需要对输入信息进行格式化

data() {
    return {
      title: "",
      tap: "",
      content: "",
      fontCount: 0, //总字数
    };
  },
  watch: {
    //监听正文内容变化以改变总字数
    content: {
      handler(newVal, oldVal) {
        this.fontCount = 0;
        let htmlState = false; //判断i此时是否在标签中
        let specialState = false; //判断此时i是否在文本输入的< > & 这些特殊字符中
        for (let i = 0; i < newVal.length; i++) {
          if (newVal.charAt(i) === "<") {
            htmlState = true;
          } else if (newVal.charAt(i) === ">") {
            htmlState = false;
          } else if (
            newVal.charAt(i) != " " &&
            !htmlState &&
            newVal.charAt(i) != "&" &&
            !specialState
          ) {
            this.fontCount++;
          } else if (newVal.charAt(i) === "&") {
            specialState = true;
          } else if (newVal.charAt(i) === ";" && specialState) {
            specialState = false;
            this.fontCount++;
          }
        }
      },
    },
  },

使用watch对数据变化进行侦听，当数据变化时对fontCount进行初始化，并使用for循环遍历字符串每个字符，

htmlState用来进行html标签判断，当htmlState为true时表示i进入html标签中（字符串中的html标签存储文字的格式），此时不能进行计数，当字符为 " > "时表示退出，htmlState为false，开始计数

specialState用来进行特殊字符（< > &)判断，用法同上，当字符为" ; " 表示退出，开始计数（特殊字符以 & 开始，以；结束）