Как разобрать строку в теге script в JavaScript? - PullRequest
Новая
       39

Как разобрать строку в теге script в JavaScript?

0 голосов
/ 16 апреля 2020

Существует DOMParser, который преобразует строку в элементы DOM, например: 

let htmlContentString = '<div>1</div><div>2</div>';
let doc = new DOMParser().parseFromString(htmlContentString , 'text/html');
let firstDiv = doc.body.firstChild;
let secondDiv = firstDiv.nextSibling;
...    
...

Мне нужно что-то подобное для тега скрипта.

Вот поток того, что мне нужно сделать: из API я динамически получаю строки (которые фактически представляют фрагмент скрипта). Вот пример того, как эти строки будут выглядеть: 

<script id="some-snippet" src="https://url.to.snippet.js?key=some-key"></script>

Затем, после получения этой строки, мне нужно будет динамически добавить ее в заголовок документа.

  • Моя первоначальная проблема заключается в том, что я на самом деле не могу сделать это должным образом;
  • Дополнительное примечание: после получения сценария старый необходимо удалить и заменить новым;

Вот что я пробовал до сих пор: 

function receiveScript(number) {
  let exampleScript = encodeURIComponent('<script id="some-snippet" src="https://url.to.snippet.js?key=' + String(number) + '"><\/script>');
  
  $('script.custom_script').remove();
  const script = document.createElement('script');
  script.setAttribute('class', 'custom_script');
  script.text = decodeURIComponent(exampleScript);
  document.head.appendChild(script);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="receiveScript(1)">Simulate Receiving Script 1</button>
<button onclick="receiveScript(2)">Simulate Receiving Script 2</button>

Проблема действительно возникает в строке 

script.text = decodeURIComponent(exampleScript);

, что на самом деле разумно, так как я пытаюсь установить строку, которая является весь сценарий (включая теги сценария).

Я не могу передать приведенный выше exampleScript в качестве ссылки для разделения id и src, для их раздельного анализа и установки проанализированных значений во вновь созданном сценарии, поскольку сценарии, которые будут получены, будут разных типов и будут иметь разные свойства.

Вот почему, будет идеально, если есть какой-то парсер, который будет непосредственно преобразовывать полученную строку в сценарий DOM и вместо создания document.createElement('script'); каким-либо образом непосредственно анализировать данную строку.

1 Ответ

0 голосов
/ 16 апреля 2020

Метод encodeURIComponent экранирует некоторый символ, предполагая, что вся строка является URL-адресом. Вы должны установить script.url на правильное значение. 

function receiveScript(number){ 
  url=`https://url.to.snippet.js?key=${number}`
  $('script.custom_script').remove();
  const script = document.createElement('script');
  script.setAttribute('class', 'custom_script');
  script.src = url; 
  
  document.head.appendChild(script);
  console.log(script)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="receiveScript(1)">Simulate Receiving Script 1</button>
<button onclick="receiveScript(2)">Simulate Receiving Script 2</button>
...