在HarmonyOS鸿蒙Next的TextInput上将电话号码格式化为XXX XXXX XXXX

可参考如下demo：

@Entry
@Component
struct phone_example {
  @State submitValue: string = ''
  @State text: string = ''
  public readonly NUM_TEXT_MAXSIZE_LENGTH = 13
  @State teleNumberNoSpace: string = ""
  @State nextCaret: number = -1 // 用于记录下次光标设置的位置
  @State actualCh: number = -1 // 用于记录光标在第i个数字后插入或者第i个数字前删除
  @State lastCaretPosition: number = 0
  @State lastCaretPositionEnd: number = 0
  controller: TextInputController = new TextInputController()

  isEmpty(str?: string): boolean {
    return str == 'undefined' || !str || !new RegExp("[^\\s]").test(str)
  }

  checkNeedNumberSpace(numText: string) {
    let isSpace: RegExp = new RegExp('[\\+;,#\\*]', 'g')
    let isRule: RegExp = new RegExp('^\\+.*')

    if (isSpace.test(numText)) {
      // 如果电话号码里有特殊字符，就不加空格
      if (isRule.test(numText)) {
        return true
      } else {
        return false
      }
    }
    return true;
  }

  removeSpace(str: string): string {
    if (this.isEmpty(str)) {
      return ''
    }
    return str.replace(new RegExp("[\\s]", "g"), '')
  }

  setCaret() {
    if (this.nextCaret != -1) {
      console.log("to keep caret position right, change caret to", this.nextCaret)
      this.controller.caretPosition(this.nextCaret)
      this.nextCaret = -1
    }
  }

  calcCaretPosition(nextText: string) {
    let befNumberNoSpace: string = this.removeSpace(this.text)
    this.actualCh = 0
    if (befNumberNoSpace.length < this.teleNumberNoSpace.length) { // 插入场景
      for (let i = 0; i < this.lastCaretPosition; i++) {
        if (this.text[i] != ' ') {
          this.actualCh += 1
        }
      }
      this.actualCh += this.teleNumberNoSpace.length - befNumberNoSpace.length
      console.log("actualCh: " + this.actualCh)
      for (let i = 0; i < nextText.length; i++) {
        if (nextText[i] != ' ') {
          this.actualCh -= 1
          if (this.actualCh <= 0) {
            this.nextCaret = i + 1
            break;
          }
        }
      }
    } else if (befNumberNoSpace.length > this.teleNumberNoSpace.length) { // 删除场景
      if (this.lastCaretPosition === this.text.length) {
        console.log("Caret at last, no need to change")
      } else if (this.lastCaretPosition === this.lastCaretPositionEnd) {
        // 按键盘上回退键一个一个删的情况
        for (let i = this.lastCaretPosition; i < this.text.length; i++) {
          if (this.text[i] != ' ') {
            this.actualCh += 1
          }
        }
        for (let i = nextText.length - 1; i >= 0; i--) {
          if (nextText[i] != ' ') {
            this.actualCh -= 1
            if (this.actualCh <= 0) {
              this.nextCaret = i
              break;
            }
          }
        }
      } else {
        // 剪切/手柄选择 一次删多个字符
        this.nextCaret = this.lastCaretPosition // 保持光标位置
      }
    }
  }

  //删除指定位置的字符
  removeCharAt(str: string, index: number) {
    if (index >= 0 && index < str.length) {
      return str.slice(0, index) + str.slice(index + 1);
    }
    return str; // 如果索引超出范围，返回原字符串
  }

  build() {
    Column() {
      Row() {
        TextInput({ text: `${this.text}`, controller: this.controller }).type(InputType.PhoneNumber).height('48vp')
          .onChange((number: string) => {
            this.teleNumberNoSpace = this.removeSpace(number);
            console.log(':::number', number.substring(8, 9))
            let befNumberNoSpace: string = this.removeSpace(this.text)
            //判断 删除场景 去空字符串小于等于11 变动的字符串小于13 判断是否有特殊字符
            if (this.text.length > number.length && this.teleNumberNoSpace.length <= 11
              && number.length < this.NUM_TEXT_MAXSIZE_LENGTH && this.checkNeedNumberSpace(number)) {
              //判断是否删除了空白字符
              let parts = number.split(' ')
              if (parts.length - 1 != 2) {
                //删除第二个空白字符场景
                if (number.substring(8, 9) != ' ') {
                  //012 4567 9012
                  console.log(":::删除后的字符", this.removeCharAt(number, 7))
                  number = this.removeCharAt(number, 7)
                }
                //删除第一个空白字符场景
                if (number.substring(3, 4) != ' ') {
                  //012 4567 9012
                  console.log(":::删除后的字符", this.removeCharAt(number, 7))
                  number = this.removeCharAt(number, 2)
                }
              }
            }
            //更新去空后的电话号码
            this.teleNumberNoSpace = this.removeSpace(number);

            let nextText: string = ""
            if (this.teleNumberNoSpace.length > this.NUM_TEXT_MAXSIZE_LENGTH - 2) {
              nextText = this.teleNumberNoSpace
            } else if (this.checkNeedNumberSpace(number)) {
              if (this.teleNumberNoSpace.length <= 3) {
                nextText = this.teleNumberNoSpace
              } else {
                let split1: string = this.teleNumberNoSpace.substring(0, 3)
                let split2: string = this.teleNumberNoSpace.substring(3)
                nextText = split1 + ' ' + split2
                if (this.teleNumberNoSpace.length > 7) {
                  split2 = this.teleNumberNoSpace.substring(3, 7)
                  let split3: string = this.teleNumberNoSpace.substring(7)
                  nextText = split1 + ' ' + split2 + ' ' + split3
                }
              }
            } else {
              nextText = number
            }
            console.log("onChange Triggered:" + this.text + "|" + nextText + "|" + number)
            if (this.text === nextText && nextText === number) {
              // 此时说明数字已经格式化完成了 在这个时候改变光标位置不会被重置掉
              this.setCaret()
            } else {
              this.calcCaretPosition(nextText)
            }
            this.text = nextText

          })
          .onTextSelectionChange((selectionStart, selectionEnd) => {
            // 记录光标位置
            console.log("selection change: ", selectionStart, selectionEnd)
            this.lastCaretPosition = selectionStart
            this.lastCaretPositionEnd = selectionEnd
          })
      }
    }
    .width('100%')
    .height("100%")
  }
}