Question

几天来我一直在寻求帮助，我问了十二个问题，所有这些问题都被标记为重复（在对链接的问题进行了彻底调查之后，我发现这是另一个问题）和一些无用的评论。这次，我从另一个角度出发。到目前为止，我已经完成了这项工作：

var themes = [
  'red',
  'pink',
  'purple',
  'deep-purple',
  'indigo',
  'blue',
  'light-blue',
  'cyan',
  'teal',
  'green',
  'lime',
  'khaki',
  'yellow',
  'amber',
  'orange',
  'deep-orange',
  'blue-grey',
  'brown',
  'grey',
  'dark-grey',
  'black'
]

themes.forEach((theme)=>{
  HTTP.get('https://www.w3schools.com/lib/w3-theme-${theme}.css', (err, res)=>{
    console.log(`/*${theme}*/\n${res.content
      .replace(/w3-theme/g, theme)
      .replace(/w3-text-theme/g, `${theme}-text`)
      .replace(/w3-border-theme/g, `${theme}-border`)
      .replace(/w3-hover-theme/g, `${theme}-hover`)
      .replace(/w3-hover-text-theme/g, `${theme}-hover-text`)
      .replace(/w3-hover-border-theme/g, `${theme}-hover-border`)
      .replace(`${theme}-action`, `btn-${theme}`)
    }\n`)
  })
}

每种颜色的输出是其中之一：

/*lime*/
.lime-l5 {color:#000 !important; background-color:#fcfdf3 !important}
.lime-l4 {color:#000 !important; background-color:#f5f8d7 !important}
.lime-l3 {color:#000 !important; background-color:#eaf1af !important}
.lime-l2 {color:#000 !important; background-color:#e0ea87 !important}
.lime-l1 {color:#000 !important; background-color:#d6e35f !important}
.lime-d1 {color:#000 !important; background-color:#c1d325 !important}
.lime-d2 {color:#fff !important; background-color:#acbb21 !important}
.lime-d3 {color:#fff !important; background-color:#96a41d !important}
.lime-d4 {color:#fff !important; background-color:#818c19 !important}
.lime-d5 {color:#fff !important; background-color:#6b7515 !important}

.lime-light {color:#000 !important; background-color:#fcfdf3 !important}

/*These lines need to be added via a replace statement*/
.btn-lime-light {color:#000 !important; background-color: #fcfdf3 !important}
.btn-lime-light:hover {color:#000 !important; background-color:#f5f8d7 !important; border-color:#f5f8d7 !important}
/*They aren't currently here*/

.lime-dark {color:#fff !important; background-color:#6b7515 !important}
.btn-lime {color:#fff !important; background-color:#6b7515 !important}

.lime {color:#000 !important; background-color:#cddc39 !important}
.lime-text {color:#cddc39 !important}
.lime-border {border-color:#cddc39 !important}

.lime-hover:hover {color:#000 !important; background-color:#cddc39 !important}
.lime-hover-text:hover {color:#cddc39 !important}
.lime-hover-border:hover {border-color:#cddc39 !important}

我已经尝试在几乎可以修改的每个变体中添加以下内容（即添加标志，更改符号，将其分解等）：

.replace(/(\.(.*)-l4 .*#(.*?) .*#(.*) .*}(\n.*?)*-light.*?#(.*?) .*#(.*) .*})/, `$1\n.btn-$2-light {color:#$6 !important; background-color: #$7 !important}\n.btn-$2-light:hover {color:#$3 !important; background-color:#$4 !important; border-color:#$4 !important}`)

无济于事，它找到0个与My online tests相反的匹配项。

我的问题是：我应该如何添加这两行？

Answer 1

我找到了解决方法。

var ps = {
  'l4color':new RegExp(`\\.${theme}-l4 .*?#(.*?) `),
  'l4bg':new RegExp(`\\.${theme}-l4 .*?-color:#(.*?) `),
  'lightcolor':new RegExp(`\\.${theme}-light .*?#(.*?) `),
  'lightbg':new RegExp(`\\.${theme}-light .*?-color:#(.*?) `),
}
var as = {}
for(var p in ps){
  as[p] = ps[p].exec(rules)[1]
}

这使我不必使用替换功能，而只需创建另一个日志：

`.btn-${theme}-light {color:#${as.lightcolor} !important; background-color: #${as.lightbg} !important}\n.btn-${theme}-light:hover {color:#${as.l4color} !important; background-color:#${as.l4bg} !important; border-color:#${as.l4bg} !important}\n`

当然，它不允许所有东西都排列整齐，但它可以正常工作。

为我的特定代码编写正则表达式

1 个答案: