无法实现字符串字符逐位替换效果，这是Javascript的bug吗？

问题根因 #

你遇到的运行异常不是JavaScript的bug，是String.replace()方法的使用逻辑不符合预期导致的：当replace()的第一个参数传入普通字符串时，只会替换整个文本中第一个匹配到的对应字符，并非替换你指定索引位置的字符，所以才会出现字符错位的乱码输出。

修复方案 #

要实现按索引逐位替换的效果，更稳妥的方式是把字符串转为字符数组操作，数组支持直接通过下标修改对应位置的内容，操作完成后再拼接为字符串即可。

修复后完整代码 #

HTML代码

<div id="demo"></div>

JS代码

let title1 = "Your sales place";
let title2 = "Software Hub";
// 把原替换目标字符串转为字符数组，方便按索引修改
let title2Arr = title2.split('');
var k = 0;
var speed = 150;

function typeWriter() {
  if (k < title1.length) {
    // 直接修改对应索引位置的字符
    title2Arr[k] = title1.charAt(k);
    // 数组转字符串后更新到DOM
    document.getElementById("demo").innerHTML = title2Arr.join('');
    k += 1;
    setTimeout(typeWriter, speed);
  }
}

typeWriter();

逻辑说明 #

• 初始时将待替换的字符串title2拆分为字符数组，规避字符串不可直接按索引修改的特性
• 每次循环直接修改数组对应k下标位置的字符为title1的对应位字符，不需要调用replace方法
• 如果title1长度大于title2，超出的位置会自动追加到数组末尾，拼接后自然得到延长的字符串
• 逐位替换的打字机效果完全符合预期，后续要改随机替换模式只要修改索引的遍历顺序即可

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