1

尝试使用 insertHTML 时

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

在除 Safari 之外的任何浏览器中都能正常工作。

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

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

- - - - - - - - 例子

通道1 | 其他标签 = 作品

第 1 段 | 其他标签 = 不起作用

其他标签 | 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>

在 safari 中（仅当有空格和另一个文本时（Passage1 有效，Passage 1 无效，并且通常我每个文档有 2-3 个标签，如果（在这种情况下）Passage 是最后一个（标签 1 - 标签 2 - Passage1/Passage 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>

苹果浏览器

Passage1 + 不是最后一个标签 = 添加 b 块

Passage 1 + not last tag = 添加没有 ID 的 span 块

Passage1 + 最后一个标签 = 添加没有 ID 的 span 块

Passage 1 + last tag = 添加不带ID的span块

function insertHTML(text) {
    if (window.find && window.getSelection) {
    document.designMode = "on";
    var sel = window.getSelection();
    sel.collapse(document.body, 0);
    while (window.find(text)) {
    document.execCommand('insertHTML', false, '<b id="searchId1"     style="background-color: red" >Passage</b>');        sel.collapseToEnd();
    }
      document.designMode = "off";
  }
 }
 
<input id="inputSearch" type="search" placeholder="Search" value="Passage">
 
 <button id="button" type="search" onClick="insertHTML(inputSearch.value)"> Search</button>


<p>Passage 1</p>
<p>Tag 2</p>
<p>Tag 3</p>

编辑：在这里找到解决方案：解决方案 TLDR：必须将可插入元素封装在父 div 中。

4

0 回答 0