Element Plus中使用正規表示式進行電話號碼輸入格式化

Question

對於微小但非常令人沮喪的問題，我們將不勝感激。我正在使用 element plus 庫開發 Vue 專案。 使用者輸入：'123456789' 我需要撥打：' 998-(12) 345-67-89

Element plus 有格式化程序，但我需要使用正規表示式來製作它。不幸的是我很難讓它發揮作用。 https://element-plus.org/en-US/component/input.html#formatter

我現在只檢查了號碼，無法進一步了解

<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}` : '')) 透過新增- 僅在必要時在您鍵入時啟動。