Включить только тег <script>из источника страницы - PullRequest
Новая
       60

Включить только тег <script>из источника страницы

0 голосов
/ 10 февраля 2020

У меня есть строка, скажем 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}} />

Я не хочу вставлять HTML теги, подобные <style>, <link> помечает данные, относящиеся к тегу, и требует только ввода всех данных, связанных с пометкой <script>. Есть ли способ, которым я могу достичь этого с помощью регулярного выражения, выбирая только <script> теги.

Так что я, наконец, хочу ввести, похоже на - 

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

Какой правильный путь для достичь этого в Javascript?

Ответы [ 2 ]

1 голос
/ 11 февраля 2020

Вы можете найти нужные теги с помощью RegEx Группы захвата и 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);
0 голосов
/ 11 февраля 2020

Я не знаком с 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;
}
...