如何使用JavaScript实时将多个文本字段内容合并转换为slug

你当前的代码核心问题是每次触发转换函数时仅传入了当前输入框的单个值，没有同时读取四个字段的内容做合并处理，因此无法生成四段拼接的slug。以下是可直接运行的修改后代码：

<!-- 四个输入字段 -->
<label for="first_name">First Name</label>
<input onkeyup="convertToSlug()" type="text" id="first_name" name="first_name" value="" />

<label for="middle_name">Middle Name</label>
<input onkeyup="convertToSlug()" type="text" id="middle_name" name="middle_name" value="" />

<label for="last_name">Last Name</label>
<input onkeyup="convertToSlug()" type="text" id="last_name" name="last_name" value="" />

<label for="suffix">Suffix</label>
<input onkeyup="convertToSlug()" type="text" id="suffix" name="suffix" value="" />

<!-- 生成的slug输入框 -->
<form>
<input type="text" id="url" name="url" value="" />
</form>

<script>
/* 编码为slug格式 */
function convertToSlug() {
  // 定义单个文本的slug处理逻辑
  const processSingleStr = (str) => {
    // 替换特殊字符、符号为空格，转小写
    str = str.replace(/[`~!@#$%^&*()_\-+=\[\]{};:'"\\|\/,.<>?\s]/g, ' ').toLowerCase();
    // 去除首尾空格
    str = str.replace(/^\s+|\s+$/gm,'');
    // 多个空格替换为单个短横线
    str = str.replace(/\s+/g, '-');
    return str;
  }

  // 依次读取四个字段的处理后值
  const fields = [
    processSingleStr(document.getElementById('first_name').value),
    processSingleStr(document.getElementById('middle_name').value),
    processSingleStr(document.getElementById('last_name').value),
    processSingleStr(document.getElementById('suffix').value)
  ]

  // 过滤空字段后用短横线拼接，避免出现多余的连续短横线
  const finalSlug = fields.filter(item => item).join('-');
  document.getElementById('url').value = finalSlug;
}
</script>

实现逻辑说明 #

• 删掉了原代码中无效的onload事件，输入框本身不支持加载触发事件
• 给每个输入字段新增了唯一ID，方便JS直接读取对应值
• 拆分出单字段处理逻辑，确保每个字段内部的特殊字符、空格都会被正常格式化
• 自动过滤未填写的空字段，比如用户没有填中间名时，不会出现a--b这类带连续短横线的异常格式
• 任意字段输入时都会重新拉取四个字段的最新值生成slug，保证实时同步

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