Javascript - 在 dom 中编辑元素时选择不突出显示

问：

当我在编辑元素后通过 window.getSelection（）.addRange（） 函数选择一些文本时，该选择不会显示在浏览器 （Chrome） 上。我需要它来提供网站上的搜索/替换功能。因此，当我替换元素中的字符串，然后选择下一个匹配项时，它设置正确，但未突出显示。

这是代码（replace 函数由按钮上的单击事件调用）：

replace(text, value) {
    let selection = window.getSelection();
    let contentString = selection.focusNode.textContent;
    let replaceString = contentString.substring(selection.focusOffset - text.length, selection.focusOffset);
    if (replaceString === text) {
        selection.focusNode.textContent = contentString.substring(0, selection.focusOffset - text.length) + value + contentString.substring(selection.focusOffset);
    }
    this.search(text);
    //setTimeout(() => this.search(text), 500); //with this it works
}

搜索函数遍历应该搜索的元素，这是设置范围的部分：

const range = document.createRange();
range.setStart(foundElement.firstChild, index);
range.setEnd(foundElement.firstChild, index + text.length);
window.getSelection().removeAllRanges();
foundElement.scrollIntoView(false);
window.getSelection().addRange(range);

我把搜索功能放在超时状态，然后它就工作了。因此，我假设在进行文本选择时仍然编辑了该元素，但我真的不明白为什么选择可以正常工作，但它只是没有突出显示。 我可以使用超时，它会正常工作，但不会很顺利。有没有其他方法可以解决这个问题？