replace目标替换，怎么让剩余的也替换掉？

Question

const tit = 'abdfjijABaja2324'
const sp = 'ab'
const reg = new RegExp('(' + sp + ')', 'gi')
return tit.replace(reg, '<span class="s-name">$1</span>')

结果为：
<span class="s-name">ab</span>dfjij<span class="s-name">AB</span>aja2324

想实现结果：
<span class="s-name">ab</span><span>dfjij</span><span class="s-name">AB</span><span>aja2324</span>

Answer 1

const tit = 'abdfjijABaja2324'
const sp = 'ab'
const reg = new RegExp('(' + sp + ')', 'gi')
const list = tit.split(reg)

return list.map(item => {
  if (!item) return
  
  if (reg.test(item)) {
    return `<span class="s-name">${item}</span>`
  } 
  
  return `<span>${item}</span>`
}).join('')

Answer 2

const tit = 'abdfjijABaja2324'
const sp = 'ab'
const reg = new RegExp('(' + sp + ')', 'gi')
return tit.replace(reg, '<span class="s-name">$1</span>').replace(/((?<=>)|^)([^<>]+?)((?=<)|$)(?!<\/)/g, '<span>$&</span>') 

Answer 3

const tit = 'abdfjijABaja2324'
const sp = 'ab'
const reg = new RegExp('(' + sp + ')|(.+?)(?=' + sp + '|$)', 'gi')
return tit.replace(reg,function(m,g1){return '<span'+(g1?' class="s-name"':'')+'>'+m+'</span>'})