如何使用 javascript regexp 替换字符串的一部分

Question

我有这段文字需要替换css的宽度部分：

oldStyle = "width:90%;height:inherit;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;"

我有这个代码表达式或模式：

oldStyle.replace(new RegExp("width:[0-9]+%;.*$", "g"), "width:25%;")

但结果是：

"width:25%;"

它缺少 css 的其余部分：

"height:inherit;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;"

结果应该是：

"width:25%;height:inherit;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;"

如何只更改 CSS 的宽度部分并保持其他 CSS 的其余部分不变？

Answer 1

您不需要为此任务使用正则表达式。还有更简单的选择。

基本的字符串操作

function changeWidth(style, newValue) {
  const segments = style
    .slice(0, -1) //remove last `;`
    .split(';');
    
  const nonWidthSegments = segments.filter(segment => !segment.startsWith("width"));
  
  return nonWidthSegments
    .concat(`width: ${newValue}`)
    .join(';')
    .concat(';'); //add the last `;`
}

console.log(changeWidth(
  "width:90%;height:inherit;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;",  
  "45px"
));


console.log(changeWidth(
  "margin: auto;",  
  "45px"
));


console.log(changeWidth(
  "",  
  "45px"
));

DOM 操作

function changeWidth(style, newValue) {
  const el = document.createElement("div");
  
  el.setAttribute("style", style);
  
  el.style.width = newValue;
  
  return el.getAttribute("style");
}

console.log(changeWidth(
  "width:90%;height:inherit;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;",  
  "45px"
));

console.log(changeWidth(
  "margin: auto;",  
  "45px"
));

console.log(changeWidth(
  "",  
  "45px"
));

只是想更新 VLAZ 建议的答案，经过更多测试后，此代码实际上因 .startsWith 函数而失败，因为假设您想更改 border-bottom-left-radius 并且通过的旧样式具有旧样式border-bottom，那么这将过滤掉旧样式变量中的border-bottom，而不是添加或更新border-bottom-left-radius。

所以我稍微修改了函数，仍然采用 VLAZ 的建议： 传递的键是样式属性，例如 border 或 border-top 或 width 或任何其他样式属性。

刚刚进一步编辑，因为newStyle 部分没有通过newValue。

function changeWidth(oldStyle, newValue, key) {

const segments = oldStyle
        .slice(0, -1) //remove last `;`
        .split(';');
    
    var matchSegement = "";
    for (var t = 0; t < segments.length; t++) {
        if (segments[t].split(":")[0] == key) {
            matchSegement = segments[t];
        }
    }

    var nonWidthSegments = segments.filter(function (segment) {
        return segment != matchSegement;
    });

    var newStyle = nonWidthSegments
        .concat(key + `:${newValue}`)
        .join(';')
        .concat(';'); 

}

Answer 2

您可以使用下面的正则表达式来实现您想要的。正则表达式将用% 或px 或rem 和许多其他单位替换任何宽度；

string = "width:90%;height:inherit;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;"
console.log(string.replace(/width ?: ?[0-9]+(%|[a-z]+|);/ig,"width:25%;"))

Answer 3

这将更改字符串中以width 开头并以%; 结尾的任何值，您可以根据需要修改正则表达式

first = "width:90%;height:100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;"
second = "width:90%;height:inherit;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;"
third = "height:inherit;padding-right: 15px;padding-left: 15px;width:90%;margin-right: auto;margin-left: auto;"

console.log(first.replace(/width(.*?);/g,"width:25%;"))
console.log(second.replace(/width(.*?);/g,"width:25%;"))
console.log(third.replace(/width(.*?);/g,"width:25%;"))

Answer 4

仅将数值 width:90px; 替换为 width:40px;

或 width:90%; 到 width:40%;

str = "max-width:40px;width:90px;height:inherit;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;"
console.log(str.replace(/([^-]width)(:[0-9]\d+)(.*)/g,"$1:25$3"))

str = "max-width:40px;width:90%;height:inherit;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;"
console.log(str.replace(/([^-]width)(:[0-9]\d+)(.*)/g,"$1:25$3"))

Answer 5

这部分width:[0-9]+%; 会找到一些百分比的宽度值，但是这部分.*$ 匹配“直到字符串末尾的任何内容”。

但你不希望第二部分被width:25%; 替换，所以，直接放弃吧：

oldStyle.replace(new RegExp("width:[0-9]+%;", "g"), "width:25%;")

这个 RegExp 肯定会得到改进。正如人们在 cmets 中正确指出的那样，例如，它也将匹配 max-width:75% 并随后将其更改为 max-width:25%。 但是，根据您的用例，它可能就足够了。

一般来说，考虑到可能出错的事情的数量，您希望在这种情况下避免使用 RegExp，直到您有其他选择。