Изменить цвет текста, когда оно соответствует регулярному выражению - JavaScript

Question

Я хочу изменить цвет текста, когда он соответствует регулярному выражению, но не могу заставить его работать.

В приведенном ниже коде переменная HTMLattr соответствует чему-либо внутри, включая кавычки в элементе <code>. Затем я хочу иметь возможность изменить цвет этого текста. Обычно я делаю это в JavaScript с cssText, но это свойство не работает?

В приведенном ниже примере регулярное выражение возвращает значение "test", включая кавычки, как и ожидалось. Я пытаюсь сделать текст "test" красным.

Я новичок в регулярных выражениях, поэтому любая помощь будет потрясающей.

Эмили

// CHANGE COLOUR OF MATCHED REGEX
var codeHTML = document.getElementsByClassName('code-html')

for (var i = 0; i < codeHTML.length; i+=1) {

  var str = codeHTML[i].textContent
  var HTMLattr = str.match(/".+"/g)

  if(HTMLattr) {
      HTMLattr.style.cssText = 'color:red;'
  }

  console.log(HTMLattr)
  
}

<code class="code code-html">
<span class="code-tag open">&lt;div class="test"&gt;</span>
Hi
<span class="code-tag closed">&lt;/div&gt;</span>
</code>

Answer 1

Вы не можете изменить стиль HTMLattr, потому что это просто строка, а не элемент DOM. Здесь вы говорите, что переменная javascript устанавливает для вашего свойства style.cssText значение 'color: red'. Если вы измените строку HTMLattr.style.cssText = 'color:red;' на codeHTML[i].style.cssText = 'color:red;', вы стилизуете элемент DOM, который сделает весь текст в этом элементе красным.

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

var codeHTML = document.getElementsByClassName('code-html')

for (var i = 0; i < codeHTML.length; i+=1) {

  var str = codeHTML[i].textContent
  var HTMLattr = str.match(/".+"/g)
  
  if(HTMLattr) {
      let newSpan = document.createElement("SPAN");
      let splitStr = str.split(HTMLattr[0]);
      newSpan.innerText = HTMLattr[0];
      newSpan.style.cssText = 'color:red;';
      codeHTML[i].innerHTML = "";
      codeHTML[i].append(splitStr[0]);
      codeHTML[i].appendChild(newSpan);
      codeHTML[i].append(splitStr[1]);
  }
}

<code class="code code-html">
<span class="code-tag open">&lt;div class="test"&gt;</span>
Hi
<span class="code-tag closed">&lt;/div&gt;</span>
</code>

Answer 2

Вы можете добавить класс цвета к элементу, обертывающему ваш контент, codeHTML[i].

// CHANGE COLOUR OF MATCHED REGEX
var codeHTML = document.getElementsByClassName('code-html')

for (var i = 0; i < codeHTML.length; i+=1) {

  var str = codeHTML[i].textContent;
  var HTMLattr = str.match(/".+"/g);

  if(HTMLattr) {
      codeHTML[i].style.cssText = 'color:red;'
  } 
}

<code class="code code-html">
    <span class="code-tag open">&lt;div class="test"&gt;</span>
    Hi
    <span class="code-tag closed">&lt;/div&gt;</span>
</code>

Answer 3

Вам нужно только изменить HTMLattr.style.cssText на codeHTML[i].style, так как HTMLattr - это просто сопоставленный текст, и нет элемента, который называется style.cssText.

Answer 4

Ваш HTMLattr - это просто массив со строками, у него нет атрибутов html, вам нужно найти dom, содержащий эти строки, и добавить к нему свойство css.

// CHANGE COLOUR OF MATCHED REGEX
var codeHTML = document.getElementsByClassName('code-html')

for (var i = 0; i < codeHTML.length; i += 1) {

  var str = codeHTML[i].textContent
  var HTMLattr = str.match(/".+"/g)

  if (HTMLattr) {
    HTMLattr.forEach(ele => {
      $("span:contains(" + ele + ")").css("color", "red");
    })
  }

  console.log(HTMLattr)

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<code class="code code-html">
<span class="code-tag open">&lt;div class="test"&gt;</span>
Hi
<span class="code-tag closed">&lt;/div&gt;</span>
</code>