Javascript document.ExecCommand insertHTML在safari中插入span和怪异行为

尝试使用insertHTML时

document.execCommand('insertHTML', false, `<b id="searchId${numberID}" style="background-color: ${color};" >${text}</b>`

document.execCommand（'insertHTML'，false，`${text}`

在Safari以外的任何浏览器中都可以正常工作

示例：如果a标记有“Passage”单词，则尝试插入html。但是，仅在Safari中，如果“Passage”单词位于标记顺序的末尾，或者有空格和其他文本，则插入类似的内容

document.execCommand('insertHTML', false, `<span style="background-color: ${color};" >${text}</span>`

document.execCommand（'insertHTML'，false，`${text}`

---------------例子

Passage1 | OtherTag=工程

第1段| OtherTag=不起作用

OtherTag | Passage1=不起作用

此功能用于突出显示在搜索栏中显示的大量文档中的文本，并具有一个锚定功能，可以在所有结果中移动，这是需要ID的

适用于IE、Firefox、Mozilla、Chrome和Opera。 不在Safari工作

更准确的例子：

搜索词“段落”

在除Safari之外的所有浏览器中

<div class="col-8 px-0">
  <p class="badge badge-document">
    <b id="searchId1" style="background-color: rgb(255, 226, 183);">
      Passage
    </b>
   1
  </p>
</div>

文章
1.

在Safari中（只有当有一个空间和另一个文本（通道1工作，通道1不工作），并且通常每个文档有2-3个标签时，如果（在这个场景中）通道是最后一个（标签1标签2 -通道1 /通道1），则增加这个跨度，如果它是第一个或中间，则将B作为所有其他浏览器添加。

<div class="col-8 px-0">
 <p class="badge badge-document">
  <span style="background-color: rgb(255, 226, 183);">
      Passage
  </span>
   1
 </p>
</div>

文章
1.

狩猎

Passage1+not last tag=添加b块

通道1+非最后一个标记=添加不带ID的跨度块

Passage1+last tag=添加不带ID的跨度块

第1段+最后一个标记=添加不带ID的跨度块

函数插入TML（文本）{
if（window.find&&window.getSelection）{
document.designMode=“on”；
var sel=window.getSelection（）；
选择折叠（document.body，0）；
while（window.find（text））{
document.execCommand（'insertHTML'，false，'Passage'）；sel.collapseToEnd（）；
}
document.designMode=“关闭”；
}
}

搜寻
第1段

标签2

标签3

你能做一个工作示例来说明问题吗？添加了更多示例：）！你可以使用（图标看起来像编辑器中的一个页面中的

）在堆栈溢出上做一个可运行的示例…只是好奇而已；为什么不使用

innerHTML+=无论什么

？@HereticMonkey done！：）无法使用innerHTML，使用insertHTML似乎在除safariCan之外的所有浏览器中都能正常工作。您制作了一个显示问题的工作示例？添加了更多示例：）！您可以使用（在编辑器的页面中，图标看起来像

）要在这里制作一个关于堆栈溢出的可运行示例…只是好奇；为什么不使用

innerHTML+=无论什么

？@HereticMonkey done！：）无法使用innerHTML，使用insertHTML似乎在除safari之外的所有浏览器中都能正常工作