CODEWITHSUNDEEP
javascriptregex
pjk_ok
pjk_ok

Reputation: 947

Change Text Color When It Matches A Regular Expression - JavaScript

I want to change some text color when it matches a regex, but can't seem to get it to work.

In the code below the var HTMLattr matches anything inside and including the quotations marks in the <code> element. I then want to be able to change the color of this text. The way I would normally do this in JavaScript is with cssText, but this property isn't working?

In the example below the regex returns the value "test" including the quotation marks as expected. What I'm trying to do is turn the "test" text red.

I'm new to regular expressions so any assistance would be amazing.

Emily

// 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>

Upvotes: 1

Views: 2940

Answers (4)

James
James

Reputation: 51

You can't change the style of HTMLattr because it is just a string and not an element of the DOM. What you are saying here is javascript variable set your property style.cssText to 'color:red'. If you change the line HTMLattr.style.cssText = 'color:red;' to codeHTML[i].style.cssText = 'color:red;' you are styling the DOM element which makes all the text in that element red.

I think that you're asking for is to style just the matched text. To do that you need to add another element which surrounds the text that you want to style, as below.

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>

Upvotes: 4

csabinho
csabinho

Reputation: 1609

You only have to change HTMLattr.style.cssText to codeHTML[i].style, as HTMLattr is just the matched text and there's no element that's called style.cssText.

Upvotes: 0

Ed Lucas
Ed Lucas

Reputation: 7305

You can add the color class to the element wrapping your content, 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>

Upvotes: 0

Sunil Lama
Sunil Lama

Reputation: 4539

Your HTMLattr is just an array with strings, it does not have any html attributes, you will need to find the dom containing those strings and add the css property to it.

// 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>

Upvotes: 0

Related Questions