知道你的初始html包含在哪种类型的父元素中是很有趣的。因为，如果你能以那个元素为目标。
如果你能得到父元素，那么你可以：

parent.innerHTML.replace('a text', '<span>a text').replace('needs',  'needs</span>')

首先清理标记，在<div id="d1">标记后面有额外的/div>。
很简单，只需使用here中提到的String.prototype.replaceAll()函数。

var previousText = document.getElementById('d1').innerHTML;
var startTag = 'a text';
var endTag = 'needs';
var changedText = previousText.replaceAll(startTag, '<span>'+startTag).replaceAll(endTag, endTag + '</span>');
console.log(changedText)

用这个

const start = "a text"
const end = "needs"

const html = container.innerHTML

const indexStart = html.indexOf(start)
const indexEnd = html.lastIndexOf(end)

const newHTML =
  html.slice(0, indexStart)
+ `<span>${html.slice(indexStart, indexEnd + end.length)}</span>`
+ html.slice(indexEnd + end.length)

console.log(container.innerHTML = newHTML)

span { color: red }

<div id="container">
  <div id="d1"></div>This is a text that <div id="d2"></div>needs to be manipulated
</div>