Regex replace не работает, как задумано, в любом браузере, кроме Chrome

Question

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

Мне удалось создать решение, однако оно работает толькокак и предполагалось в chrome, или если json-форма не скопирована и не вставлена. В других браузерах, таких как firefox и edge, он стилизует текст, который я не собирался стилизовать. Я проверил свое регулярное выражение с помощью regex101, и все кажется нормальным.

<pre>
   <code spellcheck="false" id="code" class="json" contenteditable="true">{
    "Id": "12345",
    "Title": "JsonForm",
    "Number": 1,
    "Text": "Text123",
    "Description": []
}

style function highlight () {let block = document.getElementById ('code');let formattedText = block.innerHTML;var text = formattedText.replace (/ (\| \ <\ / span \>) / гм, '');text = text.replace (/(".*? ") *? (? = \:) / гм," $ 1") // text = text.replace (/ (" [^ \ "\ <\/ \> \\] *? ") (? = \, | $) / гм," $ 1") // text = text.replace (/ ([0-9] *?) (? =,| $) / гм, « $ 1 ») block.innerHTML = text;}

https://jsfiddle.net/JacobShore/1xnkejma/22/ В браузерах, отличных от Chrome, если вы нажмете кнопку стиляс предустановленным json это работает, однако, когда вы копируете и вставляете json в элемент кода и нажимаете стиль, это не так. Я не уверен, что здесь происходит. Я закомментировал другие стилизованные промежутки, но они также имеютта же проблема. Я добавил json для тестирования ниже.

{
    "Id": "12345",
    "Title": "JsonForm",
    "Number": 1,
    "Text": "Text123",
    "Description": []
}

Answer 1

Регулярное выражение для назначения имён ключей не работает должным образом. Кроме того, поскольку вы повторно используете переменную block, более эффективно сохранить выборку.

const block = document.getElementById('code');  

function highlight() {      
    block.innerHTML = block.innerHTML
    .replace(/(\<span.*?>|<\/span>)/gm, '')    
    .replace(/("[^"]*"):/gm, "<span style='color: #7fdbca;'>$1</span>:");
}

<pre>
   <code spellcheck="false" id="code" class="json" contenteditable="true">
     {
      "Id": "12345",
      "Title": "JsonForm",
      "Number": 1,
      "Text": "Text123",
      "Description": []
    }
  

стиль