时间戳

首页 > 解决方案 > 为我的特定代码编写正则表达式

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

问题描述

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

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}

我尝试在几乎所有我能理解的变体中添加以下内容（IE 添加标志、更改符号、分解它等）：

.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 个与我的在线测试相反的匹配项。

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

标签： javascriptcssregexreplace

解决方案

我找到了解决办法。

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`

当然，它不允许所有东西排列整齐，但它确实有效。

推荐阅读