解析字符串中的样式属性

Question

我有一个类似下面的样式属性字符串

var style='max-width: 125px; height: auto; object-fit: cover; width: 125px; margin-left: auto; margin-right: auto;'

属性可以是任何类型。我想检查是否包含最大宽度，如果包含，则将其删除。但是我无法解决这个问题。

 var imgmaxwidth = style;

 if (imgmaxwidth.includes("max-width")) {
   self.$dialog.find('.note-image-attributes-style-maxwidth').val(value of string max-width);
 }

我想取出这个max-width值，然后从字符串中删除此属性。

最终字符串应为：

height: auto; object-fit: cover; width: 125px; margin-left: auto; margin-right: auto;

提前致谢

- user6239546

---

imgmaxwidth 不是一个字符串，所以 .includes 无法使用。只需检查所需属性是否不为空字符串即可。 - evolutionxbox

如果条件成立，那么它是一个字符串，我只需要从字符串中获取值。 - user6239546

imgInfo.style.maxWidth? - evolutionxbox

Answer 1

请尝试以下方法：

var style = 'max-width: 125px; height: auto; object-fit: cover; width: 125px; margin-left: auto; margin-right: auto;'
var styleArr = style.split(';')
var res = styleArr.filter(function (value) { 
  return !value.includes('max-width'); 
});
style = res.join(';');
console.log(style);

.as-console-wrapper { max-height: 100% !important; top: 0; }

- Mamun

---

你可以直接写成 return !value.includes('max-width');，filter 函数应该返回 true 如果要包含该项，返回 false 如果不需要包含该项。你的代码之所以能够正常工作，是因为当 value 不包含 max-width 时，它会返回 value，这是一个非空字符串，因此它是真值。当 value 包含 max-width 时，它没有明确地返回任何内容，因此它隐式地返回了假值 undefined。 - Useless Code

Answer 2

var style = $('p').attr('style');
var parts = style.split(';');
var newstyle=[];
for (i=0; i < parts.length; i++)
{
    if (parts[i].split(':')[0].toLowerCase().trim() != 'max-width')
    {
        newstyle.push(parts[i]);
    }
}
$('p').attr( 'style', newstyle.join(';'));

我进行了更正，以解决前导或尾随空格或大小写问题被忽略的情况。（在@Useless Code的评论提示下进行）

- Gene Stempel

---

如果字符串中在max-width之前有空格，那么这段代码就会出错，因为如果max-width不是样式中的第一项，那么很可能会出现这种情况。我建议使用if (parts[i].split(':')[0].match(/^\s*max-width/i))来代替测试!= 'max-width'。 - Useless Code