CODEWITHSUNDEEP
javascript
KiRa
KiRa

Reputation: 924

How to color a specific text using regular expression

I'm new to regular expression and I can't understand it well on how it works. It solves my first issue from here. But my problem now is that I want to color the two string separately. The other one is orange and other one is green. But code below is it color the text into orange. And for the or word it is possible to color it as black?.

 var str = 'A2 Award Notice or A2 Lease Contract';
 var row = '<div class="row mt-2" style="font-size:20px">'
            + '<div class="col-md-1"><input class="chckDocument  form-control flat" type="checkbox" style="height:20px; -webkit-box-shadow:none" class="form-control flat mt-2"> </div >'
            + '<div class="col-md-1"> <input type="file" data-type="" data-name="" id="' + 1 + '" class="btnClickHello d-none" value="Upload"><label for="' + 1 + '" class="btn btn-default">Upload</label></div>'
             + '<div class="col-md-10"> ' + str.replace(/(.+?)( or |$)/g, '<a style="color:orange">$1</a> <a style="color:green">$2</a>') + ' </div >'
              + '</div >';
                                        
          
$("#divID").append(row);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divID"></div>

Expected Output

A2 Award Notice <<-- color (green or orange)

or <<-- color black

A2 Lease Contract <<-- color (green or orange)

Upvotes: 2

Views: 704

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370699

You need two .replaces - a single one isn't enough, at least not without a callback function. First surround everything outside the ' or 's with your as, and then .replace the resulting string again: search for / or /g and replace with something like <span style="color:black">$&</span>, which will replace all instances of ' or ' with that ' or ' enclosed in a <span>.

That takes care of the or. For the other parts of the string, a plain regular expression alone won't work (at least not in Javascript) - to replace with something different on each match, declare an array of the colors you want to be able to use, and use a callback function that takes an item from the colors array to set as the color:

var str = 'A2 Award Notice or A2 Lease Contract';
const colors = ['green', 'orange'];
const replacedStr = str
  .replace(/(.+?)( or |$)/g, (_, g1, g2) => {
    const [color] = colors.splice(0, 1);
    return `<a style="color:${color}">${g1}</a>${g2}`;
  })
  .replace(/ or /g, '<span style="color:black">$&</span>');
console.log(replacedStr);

var row = '<div class="row mt-2" style="font-size:20px">' +
  '<div class="col-md-1"><input class="chckDocument  form-control flat" type="checkbox" style="height:20px; -webkit-box-shadow:none" class="form-control flat mt-2"> </div >' +
  '<div class="col-md-1"> <input type="file" data-type="" data-name="" id="' + 1 + '" class="btnClickHello d-none" value="Upload"><label for="' + 1 + '" class="btn btn-default">Upload</label></div>' +
  '<div class="col-md-10"> ' + replacedStr + ' </div >' +
  '</div >';


$("#divID").append(row);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divID"></div>

Upvotes: 1

Related Questions