从字符串中截断 <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

您可以将 RegEx 与 Capturing Groups 结合使用来替换 style 标签及其所有出现的内容：

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

其中：

(<style>) - 第一捕获组

<style> 按字面匹配字符 <style>（区分大小写）

[^<>]* 匹配后面没有的单个字符

*量词匹配零次到无限次，越多越好
<> 匹配列表中的单个字符 <>

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

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

演示：

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

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

Truncate <style> tag data from a string

javascript

styles

script-tag

reactjs