javascript - 如何使用 javascript 正则表达式替换字符串的一部分

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"
));

这可以推广到修改任何属性。为了避免匹配错误的属性(例如，“border-width-radius”而不是“border-width”)，.startsWith() 已更改以提供精确匹配:

function changeStyle(style, property, newValue) {
  const segments = style
    .slice(0, -1) //remove last `;`
    .split(';');
    
  const otherSegments = segments.filter(segment => segment.split(":")[0].trim() !== property);
  // an exact of the property name       --->      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  
  return otherSegments
    .concat(`${property}: ${newValue}`)
    .join(';')
    .concat(';'); //add the last `;`
}

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

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

console.log(changeStyle(
  "",  
  "width",
  "45px"
));

console.log(changeStyle(
  "padding-right: 15px;border-width-radius: 10px;",  
  "border-width",
  "4px"
));

console.log(changeStyle(
  "padding-right: 15px;border-width-radius: 10px;border-width: 10px;",  
  "border-width",
  "4px"
));

DOM 操作

可以创建内存中的 DOM 节点。这允许使用 DOM API 直接操作样式，从而避免处理字符串时的潜在问题:

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"
));

这种方法很容易推广，无需处理额外的情况:

function changeStyle(style, property, newValue) {
  const el = document.createElement("div");
  
  el.setAttribute("style", style);
  
  el.style[property] = newValue;
  
  return el.getAttribute("style");
}

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

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

console.log(changeStyle(
  "",  
  "width",
  "45px"
));

console.log(changeStyle(
  "padding-right: 15px;border-width-radius: 10px;",  
  "border-width",
  "4px"
));

console.log(changeStyle(
  "padding-right: 15px;border-width-radius: 10px;border-width: 10px;",  
  "border-width",
  "4px"
));