如何在JavaScript中将子串移至字符串末尾？Vue@keyup实现遇异常

原代码的问题 #

• 未赋值返回结果：replace是纯函数，不会修改原变量this.target.name，必须将返回值重新赋值才会生效。
• 正则匹配覆盖不全：原正则仅匹配 [Personal]位于字符串中间的情况，若它在开头/末尾或多次出现，正则无法处理。
• keyup事件触发过频：每次按键都执行字符串处理，导致输入卡顿。

修正方案 #

1. 修复字符串处理逻辑

先移除所有已存在的 [Personal]，再统一添加到末尾，确保始终只有一个且位于最后：

handleNameFormat() {
  if (!this.target.name) return;
  // 移除所有" [Personal]"标签
  const cleanName = this.target.name.replace(/ \[Personal\]/g, '');
  // 重新添加标签到末尾
  this.target.name = `${cleanName} [Personal]`;
}

2. 优化事件处理避免卡顿

用防抖函数延迟执行处理逻辑，减少触发频率，同时改用@input事件覆盖所有输入场景（如粘贴、输入法选词）：

// 组件内定义防抖工具函数
debounce(fn, delay = 200) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
},

// 初始化时绑定防抖后的处理方法
mounted() {
  this.debouncedFormat = this.debounce(this.handleNameFormat);
},

// 字符串格式化核心方法
handleNameFormat() {
  if (!this.target.name) return;
  const cleanName = this.target.name.replace(/ \[Personal\]/g, '');
  this.target.name = `${cleanName} [Personal]`;
}

模板中使用@input绑定防抖方法：

<input v-model="target.name" @input="debouncedFormat" />

内容的提问来源于stack exchange，提问作者chovy