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

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

无需向我解释德语 - 我是德国人。 ;-)

这是我的正则表达式版本，它可能更好地处理性别和复数:

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

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

我的正则表达式查找有效性别标签({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}'