Javascript str.replace字符串前面的单词的颜色

Question

文件列'col2'行包含一个字符串:

"unserer {m}, unsere {p} and {f}, unseres {n}"

是动态追加的

d3.select("#element").html(d.col2)

基于{m|f|n}的内容，我想改变文本的背景颜色。

我正在寻找一个像这样的正则表达式语句:

/.*(w+)s{f}.*/ 

我想用

替换w+

'<span style=background-color:red|yellow|green;>$1</span>

，我需要这三个用例是{m}， {f}， {n}，每个应该有自己的文本颜色。所以

 d3.select("#sentence").html(d.col2).html(function(d) {
   if ( this.match("{m}"){ 
        this.replace(/.*(w+)s{m}/gi, "<span  style=color:red;>" + $1"</span>");
 } if ( this.match("{f}") {
       this.replace(/.*(w+)s{f}/gi, "<span style=color:yellow;>" + $1"</span>");
 } else {
 this.replace(/.*(w+)s{n}/gi, "<span style=color:green;>" + $1"</span>");
 }
 };)

这段代码是我想做的伪代码;

Answer 1

不需要向我解释德语-我是德语。: -)

这是我的RegExp版本，它可能会更好地对待性别和复数:

var r=/(^|,)s*(.*?)(?=s+{([fmn])})/g;
s.replace(r,'$1<span class="$3">$2</span>');

为简单起见，我指定了类m,n和f的跨度。

My RegExp在有效的性别标签({m}，{f}或{n})和字符串的开头或,(逗号)之间查找任何内容，并认为该字符串需要着色。

结果将是

'<span class="m">unserer</span> {m}<span class="f">unsere {p} and</span> {f}<span class="n">unseres</span> {n}'

这些类当然需要在你的CSS中被赋予合适的颜色。

正如你所知道的，好的东西总是可以改进的，所以这里有一个版本，将不着色{p}标签(或任何以'{'开头的):

s.replace(/(^|,)s*([^{]+)(?=.*?{([fmn])})/g,'$1<span class="$3">$2</span>')

这将得到你

'<span class="m">unserer </span>{m},<span class="f">unsere </span>{p} and {f},<span class="n">unser </span>{n}'

Answer 2

您可以使用函数作为 str.replace 的替换，您可以在RegExp中使用lookahead

var str = "unserer {m}, unsere {p} and {f}, unseres {n}";
var d = {
        m: 'red',
        f: 'yellow',
        n: 'green'
    },
    re = /(w+)(?=s+{([^}]+)})/g;
str = str.replace(
    re,
    function ($0, $1, $2) {
        if ($2 in d)
            return '<span style="color:' + d[$2] + ';">' + $1 + '</span>';
        return $0;
    }
);
// '<span style="color:red;">unserer</span> {m}, unsere {p} <span style="color:yellow;">and</span> {f}, <span style="color:green;">unseres</span> {n}'