正则表达式 CSS 样式属性替换答案

【问题标题】：Regex CSS Style Attribute replacements正则表达式 CSS 样式属性替换
【发布时间】：2021-11-25 04:50:41
【问题描述】：

我想选择性地替换 CSS 样式字符串中的属性值...

字符串：

"font-size:13pt;font-weight:600;line-height:140%;padding-top:10px;font-family:'Open Sans', 'Droid Sans', Arial, sans-serif;color:#7f1a52;padding-bottom:5px;vertical-align:middle;background-color:; text-align:center;align:center;"

我想选择性地替换text-align 和align 中的“中心”，而不是vertical-align 中的中间。

目前为止

string.replace(/(?<=align:)(.*?)(?=;)/g,"right")

但这也将取代垂直对齐的中间。

如何排除vertical-align:middle在该字符串中被选中？？

【问题讨论】：

您可以明确检查连字符 /(?<=([^a-z]-+)align:)(.*?)(?=;)/g
你是否在某个时候将这个 CSS 应用到一个元素上？

标签： javascript regex

【解决方案1】：

您可以仅排除vertical- 并捕获 align: 在第 1 组中。然后匹配部分直到您要替换的分号。

在替换使用组1中，后跟right

\b(?<!vertical-)(align:)[^;]+

Regex demo

const regex = /\b(?<!vertical-)(align:)[^;]+/g;
const str = `font-size:13pt;font-weight:600;line-height:140%;padding-top:10px;font-family:'Open Sans', 'Droid Sans', Arial, sans-serif;color:#7f1a52;padding-bottom:5px;vertical-align:middle;background-color:; text-align:center;align:center;`;
const result = str.replace(regex, `$1right`);

console.log(result);

【讨论】：

【解决方案2】：

为什么要用正则表达式？

只需获取元素并使用Element.style.property

所以要覆盖文本对齐，你可以使用Element.style.textAlign = 'other value'

【讨论】：