如何在 JavaScript 中将字符串解析为脚本标签？答案

【问题标题】：How to parse string to script tag in JavaScript?如何在 JavaScript 中将字符串解析为脚本标签？
【发布时间】：2023-03-20 13:41:01
【问题描述】：

有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 动态接收字符串（它实际上代表一个脚本 sn-p）。以下是这些字符串的外观示例：

<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'); 以某种方式直接解析给定的字符串。

【问题讨论】：

如果您可以在呈现文档之前（即在 onload 触发器之前）获取脚本，那么听起来像 document.write 就可以解决问题

标签： javascript parsing domparser

【解决方案1】：

假设整个字符串是一个 URL，encodeURIComponent 方法会转义一些字符。您应该将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>

【讨论】：