検索ラインと変更背景色

Question

ラインは赤でなければなりません-その行で始まり、行が+で始まるならば、行は緑色にする必要があります場合は、私は私の文字列

から上でカラーライン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(/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

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(/\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;

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

-または+まず、この文字と行の残りの両方に対してチェック各行にありますreplacer関数によって収集されます。

Answer 2

+正規表現で特別な意味を持っています。 \でそれを逃れる必要があります。

また、^と$のアンカーで完全な行を選択することもできます。

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>

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>