Question

我试图从我的字符串中逐行着色

如果该行以-开头，则该行应为红色，如果该行以+开头，则该行应为绿色。

我正在尝试关注一个，但我应该如何找到该行以-开头并为该行着色。

＆＃13;

var data = "data {\n  name {\n-     data1; \n-     data2; \n+     data3; \n-     data4\n  }\n  abc {\n+     data5; \n-     data6\n  }\n}"


var res = data.replace(/data1|data2/gi, function myFunction(x){return '<span style="background-color:red;">'+x+'</span>'});

document.getElementById("json").innerHTML = res

＆＃13;

<pre id="json"></pre>

＆＃13;

Answer 1

+在正则表达式中具有特殊含义。您需要使用\转义它。

此外，您可以选择包含^和$锚点的完整行。

＆＃13;

var data = "data {\n  name {\n-     data1; \n-     data2; \n+     data3; \n-     data4\n  }\n  abc {\n+     data5; \n-     data6\n  }\n}"


var res = data.replace(/^-.*$/gim, function myFunction(x) {
  return '<span style="background-color:red;">' + x + '</span>'
});

res = res.replace(/^\+.*$/gim, function myFunction(x) {
  return '<span style="background-color:green;">' + x + '</span>'
});

document.getElementById("json").innerHTML = res

＆＃13;

<pre id="json"></pre>

＆＃13;

Answer 2

一种可能的方式：

＆＃13;

var data = "data {\n  name {\n-     data1; \n-     data2;" + 
"\n+     data3; \n-     data4\n  }\n  abc {\n+     data5; " + 
"\n-     data6\n  }\n}"

var res = data.replace(/\n([-+][^\n]+)/gi, function myFunction(x) {
  var color = x.charAt(1) === '-' ? 'red' : 'green';
  return '<span style="background-color:'+ color + ';">'+x+'</span>'
});

document.getElementById("json").innerHTML = res;

＆＃13;

<pre id="json"></pre>

＆＃13;

首先针对-或+检查每一行，然后通过替换函数收集此字符和其余行。

Answer 3

我使用了一个略有不同的正则表达式/^[-][\s]+(.*)$/gm。请注意捕获组(.*)，我将其用于缩小到字符串data1或data2，并仅突出显示字符串中的该部分（使用$1变量）。

当然，如果你不需要这样精细的亮点，其他人的答案就已经做到了。

var data = "data {\n  name {\n-     data1; \n-     data2; \n+     data3; \n-     data4\n  }\n  abc {\n+     data5; \n-     data6\n  }\n}"


var res = data.replace(/^[-][\s]+(.*)$/gm, function myFunction(x, $1) {
    return x.replace($1,'<span style="background-color:red;">' + $1 + '</span>');
  })
  .replace(/^[+][\s]+(.*)$/gm, function myFunction(x, $1) {
    return  x.replace($1,'<span style="background-color:lightgreen;">' + $1 + '</span>');
  });

document.getElementById("json").innerHTML = res

<pre id="json"></pre>

查找线条并更改背景颜色

3 个答案: