Question

在csv.file中，列'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类。

我的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}'

javascript str.replace为字符串前面的单词着色

2 个答案: