document.ExecCommand insert HTML вставляет span и странное поведение в сафари - PullRequest
Новая
       35

document.ExecCommand insert HTML вставляет span и странное поведение в сафари

1 голос
/ 17 апреля 2020

При попытке использовать вставку HTML 

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

Работает нормально в любом браузере, кроме Safari.

Пример: Попытка вставить html, если тег имеет «Прохождение» " слово. Однако только в Safari, если слово «Абзац» находится в конце порядка тегов, или имеет пробел и другой текст, вставляется что-то вроде этого 

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

------- -------- Примеры

Passage1 | OtherTag = Работы

Прохождение 1 | OtherTag = Не работает

OtherTag | Passage1 = Не работает

Эта функция используется для выделения текста, написанного на панели поиска, во многих отображаемых документах, и имеет функцию привязки для перемещения по всем результатам, так как это необходимо для имеют идентификаторы.

Работает в 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 является последним (Tag 1 - Tag 2 - Passage1 / Passage 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>

Safari

Passage1 + not last tag = добавляет b блок

пассаж 1 + не последний тег = добавляет блок пролета без идентификатора

Passage1 + последний тег = добавляет блок пролета без идентификатора

проход 1 + последний тег = добавляет блок 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.

...