Question

我是正则表达式的新手，我对它的工作原理不太了解。它解决了我从here起的第一个问题。但是我现在的问题是我想分别给两个字符串上色。另一个是橙色，另一个是绿色。但是下面的代码将文本颜色变为橙色。对于or一词，有可能将其着色为黑色吗？。

 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>

预期产量

A2获奖公告<<-颜色（绿色或橙色）

或<<-黑色

A2租赁合同<<-颜色（绿色或橙色）

Answer 1

您需要两个 .replace-一个是不够的，至少没有回调函数也是如此。首先用' or '包围a之外的所有内容，然后再次.replace生成的字符串：搜索/ or /g并替换为<span style="color:black">$&</span>，它将用' or '中包含的' or '替换<span>的所有实例。

这可以处理or。对于字符串的其他部分，仅靠普通的正则表达式是行不通的（至少在Javascript中不起作用）-要在每次匹配中替换为 different ，声明一个要排列的颜色数组能够使用并使用回调函数，该函数将colors数组中的某项设置为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>

如何使用正则表达式为特定文本着色

1 个答案: