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

在使用富文本编辑器时，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用来进行特殊字符（< > &)判断，用法同上，当字符为" ; " 表示退出，开始计数（特殊字符以 & 开始，以 ； 结束）