Utilisation d'expressions régulières pour formater la saisie du numéro de téléphone dans Element Plus

Question

Toute aide concernant des problèmes mineurs mais très frustrants serait grandement appréciée. Je développe un projet Vue en utilisant la bibliothèque element plus. Entrée de l'utilisateur : '123456789' Je dois appeler : '+998-(12) 345-67-89

Element plus a un formateur mais je dois utiliser des expressions régulières pour le créer. Malheureusement, j'ai du mal à le faire fonctionner. https://element-plus.org/en-US/component/input.html#formatter

Je n'ai vérifié le numéro que maintenant et je ne peux pas en savoir plus

<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

Vous pouvez utiliser les expressions régulières suivantes :

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}` : '')))

Le premier .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}` : '')) se lance au fur et à mesure de la frappe seulement si nécessaire en ajoutant -.