Verwenden regulärer Ausdrücke zum Formatieren der Telefonnummerneingabe in Element Plus

Question

Jede Hilfe bei kleineren, aber sehr frustrierenden Problemen wäre sehr dankbar. Ich entwickle ein Vue-Projekt mit der Element-Plus-Bibliothek. Benutzereingabe: „123456789“ Ich muss anrufen: „+998-(12) 345-67-89

Element plus verfügt über einen Formatierer, aber ich muss dafür reguläre Ausdrücke verwenden. Leider habe ich Probleme, es zum Laufen zu bringen. https://element-plus.org/en-US/component/input.html#formatter

Ich habe die Nummer erst jetzt überprüft und kann nicht mehr erfahren

<script setup>
import { ref, unref } from 'vue'
import { ElInput } from 'element-plus'

const phoneNumber = ref('')
</script>
<template>
  <el-input v-model="phoneNumber" :formatter="(value) => value.replace(/D/g, '')" />
</template>

Answer 1

您可以使用以下正则表达式：

value.replace(/^\+998|\D/g, '').replace(/^(\d{1,2})(\d{1,3})?(\d{1,2})?(\d{1,2})?.*/, (m, g1, g2, g3, g4) => `+998-(${g1})` + (g2 ? `-${g2}` : '') + (g3 ? `-${g3}` : '') + (g4 ? `-${g4}` : '')))

第一个 .replace(/^\+998|\D/g, '') 删除字符串开头的 +998 （由成功的后续替换）和任何非数字字符，以及 replace(/^(\d{1,2})(\d{1,3})?(\d{1,2})?(\ d{1,2})?.*/, (m, g1, g2, g3, g4) => `+998-(${g1})` + (g2 ? `-${g2}` : '' ) + (g3 ? `-${g3}` : '') + (g4 ? `-${g4}` : '')) 通过添加 - 仅在必要时在您键入时启动。