javascript - 匹配正则表达式时更改文本颜色 - JavaScript

Question

当它与正则表达式匹配时，我想更改一些文本颜色，但似乎无法让它工作。

在下面的代码中，var匹配内部的任何内容，包括元素HTMLattr中的引号。<code>然后我希望能够更改此文本的颜色。我通常在 JavaScript 中执行此操作的方式是 with 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>

标签： javascriptregex

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>