javascript - 查找线条并更改背景颜色

Question

我正在尝试从我的字符串中逐行着色

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

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

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

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

Answer 1

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

此外，您还可以选择带有 ^ 和 $ anchor 的完整行。

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

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