从字符串中截断 <style> 标记数据

Question

我有一个字符串，比如说 headData，它是 <script> 和 <style> 标记的组合。对于 Ex（带有虚拟数据） -

let headData = '<style>
        @font-face {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 300;
            src: local('Roboto Light'), local('Roboto-Light'), url(path-to.woff) format('woff');
        }</style>
    <script>var isPresent = false;</script>
    <script>var isContent = true;</script>
    <style>@font-face {
            font-family: 'Courgette';
            font-style: normal;
            font-weight: 400;
            src: local('Courgette Regular'), local('Courgette-Regular'), url(path-to.woff2) format('woff2');}</style>'

我在标签中注入了整个 headData，如下所示。

<script dangerouslySetInnerHTML={{__html: headData}} />

我不想注入<style>标签相关数据，只想注入所有<script>标签相关数据。

所以我最终要注入的类似于 -

let headData = '<script>var isPresent = false;</script>
        <script>var isContent = true;</script>'

在 Javascript 中实现这一目标的正确方法是什么？

Answer 1

我会使用DOMParser 将其转换为文档，删除所有<style>，然后获取内部HTML：

const headData = `<style>
        @font-face {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 300;
            src: local('Roboto Light'), local('Roboto-Light'), url(path-to.woff) format('woff');
        }</style>
    <script>var isPresent = false;<\/script>
    <script>var isContent = true;<\/script>
    <style>@font-face {
            font-family: 'Courgette';
            font-style: normal;
            font-weight: 400;
            src: local('Courgette Regular'), local('Courgette-Regular'), url(path-to.woff2) format('woff2');}</style>`;
const doc = new DOMParser().parseFromString(headData, 'text/html');
for (const style of doc.querySelectorAll('style')) {
  style.remove();
}
const trimmedText = doc.head.innerHTML;
console.log(trimmedText);

Answer 2

您可以使用带有 Capturing Groups 的 RegEx 来替换 style 标记及其所有出现的内容：

/(<style>)[^<>]*(<\/style>)/g

地点：

(<style>) - 第一捕获组

<style> 匹配字符 <style> 的字面意思（区分大小写）

[^<>]* 匹配下面不存在的单个字符

1. * 量词在零次和无限次之间匹配，尽可能多次

2. <> 匹配列表中的单个字符<>

(<\/style>) - 第二捕获组

g 全局修饰符。匹配所有（第一次匹配后不返回）

演示：

let headData = `<style>
        @font-face {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 300;
            src: local('Roboto Light'), local('Roboto-Light'), url(path-to.woff) format('woff');
        }</style>
    <script>var isPresent = false;<\/script>
    <script>var isContent = true;<\/script>
    <style>@font-face {
            font-family: 'Courgette';
            font-style: normal;
            font-weight: 400;
            src: local('Courgette Regular'), local('Courgette-Regular'), url(path-to.woff2) format('woff2');}</style>`;
            
 var re = /(<style>)[^<>]*(<\/style>)/g;
 headData = headData.replace(re,'').trim();
 console.log(headData);