内联javascript在替换HTML中被调用两次

Question

我正在使用Mapbox库及其div，内联javascript将地图插入到recommended元素中：

<script>
mapboxgl.accessToken = 'token';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
    center: [-74.50, 40], // starting position [lng, lat]
    zoom: 9 // starting zoom
});
</script>

与此分开，我解析了某些模式的页面，并通过jquery在任何匹配上执行replace函数，如：

$("div.comp").contents().each(function () {
    var $html = $(this).html();
    $replaced = $html.replace(/\[\?\]/g, "?");
    $replaced = $replaced.replace(... etc);
    $(this).html($replaced);
});

这些模式与Mapbox内联javascript无关，除了创建一个副作用，我需要一段时间才能找到导致它的内容时，不会干扰它。基本上，内联脚本将被执行两次。一旦，页面加载，第二次我的jquery替换函数返回html替换相关的字符串和<script>代码完整。

可能和失败的解决方案：

我意识到我可以通过偏离推荐的Mapbox方法并使用更普遍推荐的从外部文件调用javascript的方法来解决这个问题。我想避免这种情况，原因很简单，我正在使用一些条件PHP来执行或忽略Mapbox代码的某些部分，这些部分与页面前面的PHP变量相关。

相反，我在我的jquery函数中添加了一个额外的替换，如果找到任何<script>标记，则用空字符串替换它们，以便它们不会在返回的HTML中执行：

$replaced = $replaced.replace(/<script>[\s\S]+?<\/script>/g, "");

虽然这似乎适用于某些代码（对console.log的调用现在只调用一次而不是两次），但地图不再呈现。我猜测，或许，在<script>标签被替换之前它没有完全执行。

我可以看看添加完整条件等等，但这一切看起来都是不必要的过于复杂。是否有一个更优雅的解决方案我缺少确保这个内联脚本只执行一次，同时能够同时执行我的字符串替换功能？否则我可能只是试图从外部js文件运行Mapbox并将PHP条件转换为javascript。

---

在一个相关的，但单独的说明。我不认为返回带有<script>标记的html会在返回时执行其中的代码，仅在页面加载时执行。是否在页面加载时部分执行，在替换页面时没有时间完成，并再次加载？

Answer 1

从上面的评论来看，似乎可能没有更优雅的方法来解决问题。这是我能想到解决这个问题的最简单的方法：

我将内联脚本移动到外部文件，并能够将条件PHP参数转换为javascript。我还通过在插入地图的data attributes元素上将它们描述为div来翻译了几个所需的变量。从这些，我的JavaScript可以创建自己的替换变量，我需要提供给Mapbox。