仅包含来自页面源的 <script> 标记答案

【问题标题】：Include only <script> tag from page source仅包含来自页面源的 <script> 标记
【发布时间】：2020-05-25 18:08:27
【问题描述】：

我有一个字符串，比如说 headData，它是 <script>、<style> 和 <link> 标签的组合。对于 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>
    <link rel="dns-prefetch" href="//assets.adobedtm.com">
    <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>, <link> 标签相关数据这样的HTML 标签，只想注入所有<script> 标签相关数据。有没有一种方法可以使用仅选择<script> 标签的正则表达式来实现这一点。

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

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

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

【问题讨论】：

你想把javascript放在script标签中还是执行它？
它将被执行，这只是我在问题中提供的虚拟对象，实际上，我将执行 GTM 和 Adobe 脚本。我只想过滤掉 HTML 标签，只包含
我认为过滤是可能的，但我不确定它是否会作为内联脚本执行...因为所有内联脚本在加载时只执行一次
如何实现过滤。我确信它会被执行。您可以看到我发布的类似问题，它工作正常。 stackoverflow.com/questions/59947262/…
我已经发布了过滤scripts的代码，检查它是否适合你。

标签： javascript html reactjs styles script-tag

【解决方案1】：

您可以使用 RegEx Capturing Groups 和 match():

找到想要的标签

/(<script>)[^<>]*(<\/script>)/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>
    <link rel="dns-prefetch" href="//assets.adobedtm.com" />
    <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 = /(<script>)[^<>]*(<\/script>)/g;
 headData = headData.match(re).join('\n');
 console.log(headData);

【讨论】：

感谢您的更新。有没有办法我们只能检查是否包含
@ShantanuTomar，我已经更新了答案，请检查:)
可以，但只提取第一个
@ShantanuTomar，我不知道你为什么会出现单次出现，我已经在 FireFox 和 Chrome 中进行了测试，并按预期得到了两次出现：)

【解决方案2】：

我不熟悉 React，但尝试使用正则表达式解析 HTML 通常不是一个好主意。

您可能会遇到使用正则表达式的各种问题。（例如，一些脚本标签可能包含如下代码：<script> const myString='<script></script>'; </script>）。

我建议使用浏览器的内置解析器而不是正则表达式来提取脚本标签及其内容。

function getScriptsString(headString) {
  const head = document.createElement('head');
  head.innerHTML = headData;
  const headChildrenArray = Array.from(head.children);
  const scriptsString = headChildrenArray.reduce((str,el) => {
    if(el.tagName === 'SCRIPT') {
      return str + el.outerHTML;
    }
    return str;
  }, '');
  return scriptsString;
}

【讨论】：