如何从字符串中删除 type="text/css" 属性？答案

【问题标题】：How to remove type="text/css" property from string?如何从字符串中删除 type="text/css" 属性？
【发布时间】：2019-07-11 13:04:36
【问题描述】：

我正在使用的库 (@loadable/server) 正在返回 <style type='text/css'> <my styles here> </style>，我想从那里删除 type='text/css'。

原因是 W3C 验证器发出警告：

样式元素的 type 属性不需要，应该省略

我尝试使用正则表达式删除它但没有成功，因为它是一个原始字符串。

function getInlineStyleTags() {
   <some logic here>
   ...
   return `<style type='text/css' data-chunk='${asset.chunk}'>${data}</style>`
}

styleTags = getInlineStyleTags()

我希望通过正则表达式或其他方法从变量styleTags 中删除type='text/css'。

【问题讨论】：

您只想删除 type 属性？ <style type='text/css'>my styles here</style> --> <style>my styles here</style>
@Neekobus 是的，只是类型属性。
运行 W3C 验证器会引发警告：The type attribute for the style element is not needed and should be omitted.
@andrehigher — 这是一个警告，而不是错误，如果你想更改它，你应该在源代码中这样做，而不是使用添加它的代码然后删除它的其他代码。
styleTags = getInlineStyleTags().replace("type='text/css'", '')

【解决方案1】：

我不知道你为什么要这样做，但我想一个简单的replace 会起作用：

var styleWithoutAttr = styleTags.replace("type='text/css'", '')

如果你想处理单引号或双引号的可能性，你可以这样做：

var styleWithoutAttr = styleTags.replace("type=['\"]text/css['\"]", '')

【讨论】：

@andrehigher 您必须匹配所使用的引号（单引号或双引号），或者使用同时处理两者的第二个变体。
它不起作用。 '<style type="text/css"> body{border: 1px} </style>'.replace("type=['\"]text/css['\"]", '') 提供相同的字符串。
因为 .replace 不在原始字符串上运行。你需要做styleTags = styleTags.replace(...)或styleTags= getInlineStyleTags().replace(...)
@mplungjan 我刚刚添加了新的变量赋值
我正在考虑使用正则表达式的复杂解决方案，但只是替换效果很好。谢谢@Neekobus

【解决方案2】：

只需将字符串 styleTags 替换为 ''

styleTags=styleTags.replace(`type='text/css'`,'')

【讨论】：