JavaScript字符串首尾符号空格添加问题：修正现有函数缺陷

需求与示例 #

需求：仅针对字符串首尾的符号，为这些符号添加前后空格（开头符号后加空格，结尾符号前加空格），使其独立成“单词”。示例输入与期望输出如下：

modify('you always have to wake up?'); // 期望输出: you always have to wake up ? 
modify('...you always have to wake up'); // 期望输出: ... you always have to wake up
modify('...you always have to wake up?!'); // 期望输出: ... you always have to wake up ?!

原函数的问题 #

原实现存在三个核心问题：

• 使用replaceAll会替换字符串中所有匹配的符号，而非仅首尾的符号，不符合需求
• 符号列表顺序错误，短符号优先匹配会导致长符号被拆分（比如先处理?再处理?!，会把?!拆成?和!分别替换）
• 循环多次替换+trim会导致重复添加空格或意外移除必要空格

正确实现方案 #

我们需要针对性匹配首尾的符号，且优先处理长符号避免拆分，代码如下：

function modify(string) {
    // 按符号长度降序排列，优先匹配长符号
    const signs = ['...', '?!', '!?', '!!', '?', '!', '.'];
    // 转义正则特殊字符（比如.）
    const escapedSigns = signs.map(s => s.replace(/[.?]/g, '\\$&'));
    
    // 匹配开头的符号，替换为「符号 + 空格」
    const startRegex = new RegExp(`^(${escapedSigns.join('|')})`);
    let result = string.replace(startRegex, '$1 ');
    
    // 匹配结尾的符号，替换为「空格 + 符号」
    const endRegex = new RegExp(`(${escapedSigns.join('|')})$`);
    result = result.replace(endRegex, ' $1');
    
    // 移除可能的多余首尾空格（比如原字符串首尾无符号时）
    return result.trim();
}

// 测试示例
console.log(modify('you always have to wake up?')); // you always have to wake up ? 
console.log(modify('...you always have to wake up')); // ... you always have to wake up
console.log(modify('...you always have to wake up?!')); // ... you always have to wake up ?!

代码说明 #

1. 符号排序：将符号按长度从长到短排列，确保...、?!这类长符号优先被匹配，避免被拆分为单个符号处理
2. 正则转义：对符号中的正则特殊字符（如.）进行转义，防止正则语法错误
3. 首尾匹配：分别用正则匹配字符串开头和结尾的符号，仅替换首尾的目标符号，不会影响字符串中间的内容
4. 空格添加：开头符号后添加空格，结尾符号前添加空格，实现符号独立成“单词”的效果
5. 最终trim：处理原字符串首尾无符号的情况，避免多余空格

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