要减少<span>的数量，可以将相邻的相似值分组，并将它们全部添加到一个<span>中，下面是一个示例：

const a = '123哈哈哈321哈哈哈123哈哈哈';
const b = '123***321***123***';

const result = b.split(/(\*+)/).reduce((acc, curr) => {
  const group = a.substring(acc.prevIndex, acc.prevIndex + curr.length);
  if (curr.includes('*')) {
    acc.result += `<span style="color: red">${group}</span>`
  } else {
    acc.result += group;
  }
  acc.prevIndex += curr.length
  return acc;
}, { prevIndex: 0, result: '' }).result;

document.querySelector('#output').innerHTML = result;

<div id="output"><div>

这里，我使用b.split(/(\*+)/)将掩码字符串拆分为相邻的*组和相邻的其他字符组。
然后，我减少组数组，使用a.substring(acc.prevIndex, acc.prevIndex + curr.length)（其中acc.prevIndex是到目前为止已经处理的字符数，curr.length是当前组的长度）从需要处理的字符串中获取字符，然后，如果组中全部是*字符，则将它们添加到<span>中。

你的代码看起来应该可以比较两个字符串，并使用CSS标记差异。需要注意的是，你使用了一个DOM元素（resultDom）来存储结果，但你可能想把结果存储在一个变量中。这将使以后更容易操作和访问结果。
另外，你可以使用一个for循环来迭代两个数组，并比较每个索引的值，这样就不需要使用.forEach（）方法和.indexOf（）方法了，下面是一个例子来说明你是如何做到这一点的：

let result = '';

for (let i = 0; i < aStringWithSplit.length; i++) {
  if (bStringWithSplit[i] === '*') {
    result += `<span style='color: red;'>${aStringWithSplit[i]}</span>`;
  } else {
    result += `<span>${aStringWithSplit[i]}</span>`;
  }
}

resultDom.innerHTML = result;

在此输入代码

你不需要拆分任何东西，因为字符串已经可以像数组一样被索引了，而且你只需要运行一次循环，因为你知道字符串的长度是一样的。
而且，正如Rene van der Lende在评论中指出的，如果文本是彩色的，您只需要添加一个<span>标记。

let a = '123哈哈哈321哈哈哈123哈哈哈';
let b = '123***321***123***';

let result = '';
for (let i = 0; i < a.length; i++) {
  const item = a[i];
  result += item !== b[i] ? `<span style='color: red;'>${item}</span>` : `${item}`;
}

document.querySelector('.resultDom').innerHTML = result;

<div class='resultDom'></div>

我还使用了ternary operator而不是if-else语句来缩短代码，这不是必需的，但是看起来更好。