（vue项目）实现输入银行卡号每隔四位自动补一个空格，且再次修改输入光标不会错位

（vue项目）实现输入银行卡号每隔四位自动补一个空格，且再次修改输入光标不会错位

直接看效果：

对于输入框输入银行卡号每个4位自动增加一个空格，看了很多小伙伴写的都存在各种各样的小问题，最明显的就是光标错位（输入完成后，再回去修改中间的，光标自动跑到最后面）。后面决定手撸一个。代码如下：
html:
	<input v-model="testData" @input="formatCardNumber" ref="cardInput"  />
js:
	data() {
		return {
			testData: ''
		}
	},
	methods: {
		// 格式化卡号显示，每4位加空格
		formatCardNumber (e) {
			// 获取input的dom对象
			const input = e.target
			// 获取当前光标的位置
			const cursorIndex = input.selectionStart
			// 字符串中光标之前空格的个数
			const lineNumOfCursorLeft = (e.target.value.slice(0, cursorIndex).match(/\s/g) || []).length
			// 去掉所有空格的字符串
			const noLine = e.target.value.replace(/\s/g, '')
			// 去除格式不对的字符并重新插入空格的字符串
			const newCardNum = noLine.replace(/\D&#