javascript - 用 Jquery 替换 <script> 标签内 HTML 中的值

Question

我周末的大部分时间都对看似简单的修复视而不见，因此我向你们寻求专业知识。

我有以下脚本标记的 X 个实例(但始终具有相同的类名):

   <script type="text-html" class="tmpl-popup"><div class="acf-fc-popup">
        <ul>
                                <li>
                    <a href="#" data-layout="one_column" data-min="" data-max=""><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/one_column.png" /> <span>One Column</span></a>
                </li>
                                <li>
                    <a href="#" data-layout="two_columns" data-min="" data-max=""><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/two_columns.png" /> <span>Two Columns</span></a>
                </li>
                        </ul>
        <a href="#" class="focus"></a>
    </div>
</script>

其中我首先需要将 %%THEMEPATH%% 替换为包含站点名称(可能是“http://mydomainname.com ”)的变量。替换完成后，我需要将脚本标记内的 img 标记的 src 替换为值数据图像值。

但我似乎无法让它按照我想要的方式工作，因为 HTML 位于脚本标记内。这是我到目前为止一直在做的事情，但它似乎并没有真正完成这项工作:(

jQuery(".tmpl-popup").each(function(index){

        var haystack = jQuery(this).html(),
            needle = haystack.replace(/%%THEMEPATH%%/g, themePath);

            jQuery(this).html(needle);

            var popup = jQuery(jQuery.parseHTML(haystack)),
                imageSrc = jQuery(popup).find('img').data('image'),

            jQuery(popup).find('img').attr('src',imageSrc);

            jQuery(this).html(popup);       

    });

如果有人可以帮助我，请提前致谢:(

Answer 1

您可以使用 jQuery 的 html 的函数回调版本，并使用全局字符串替换 %%THEMEPATH%% 部分，然后(正如您提出的那样) ) 解析 HTML 并处理其中的图像，然后返回源更新 script 元素文本:

$("script.tmpl-popup").html(function(_, html) {
  // Update %%THEMEPATH%%
  html = html.replace(/%%THEMEPATH%%/g, "http://example.com");

  // Update src: `$.parseHTML` gives us an array of the top-level elements.
  // we loop through them, finding any `img[data-image]` that they contain,
  // and updating the `src` on those.
  return $.parseHTML(html).map(function(element) {
    // Note: If it were possible for an `img[data-image]` to be *at* the top
    // level, you'd need: `$(element).find("img[data-image]").addBack("img[data-image").attr...
    $(element).find("img[data-image]").attr("src", function() {
      return this.getAttribute("data-image"); // or $(this).attr("data-image") if you want more jQuery :-)
    });
    return element.outerHTML;
  });
});

$("script.tmpl-popup").html(function(_, html) {
  // Update %%THEMEPATH%%
  html = html.replace(/%%THEMEPATH%%/g, "http://example.com");
  
  // Update src: `$.parseHTML` gives us an array of the top-level elements.
  // we loop through them, finding any `img[data-image]` that they contain,
  // and updating the `src` on those.
  return $.parseHTML(html).map(function(element) {
    // Note: If it were possible for an `img[data-image]` to be *at* the top
    // level, you'd need: `$(element).find("img[data-image]").addBack("img[data-image").attr...
    $(element).find("img[data-image]").attr("src", function() {
      return this.getAttribute("data-image"); // or $(this).attr("data-image") if you want more jQuery :-)
    });
    return element.outerHTML;
  });
});

<p>You'll have to use right-click Inspect Element to see that the change has happened. :-)</p>
<script type="text-html" class="tmpl-popup"><div class="acf-fc-popup">
        <ul>
                                <li>
                    <a href="#" data-layout="one_column" data-min="" data-max=""><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/one_column.png" /> <span>One Column</span></a>
                </li>
                                <li>
                    <a href="#" data-layout="two_columns" data-min="" data-max=""><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/two_columns.png" /> <span>Two Columns</span></a>
                </li>
                        </ul>
        <a href="#" class="focus"></a>
    </div>
</script>
<script type="text-html" class="tmpl-popup"><div class="acf-fc-popup">
        <ul>
                                <li>
                    <a href="#" data-layout="one_column" data-min="" data-max=""><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/one_column.png" /> <span>One Column</span></a>
                </li>
                                <li>
                    <a href="#" data-layout="two_columns" data-min="" data-max=""><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/two_columns.png" /> <span>Two Columns</span></a>
                </li>
                        </ul>
        <a href="#" class="focus"></a>
    </div>
</script>
<script type="text-html" class="tmpl-popup"><div class="acf-fc-popup">
        <ul>
                                <li>
                    <a href="#" data-layout="one_column" data-min="" data-max=""><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/one_column.png" /> <span>One Column</span></a>
                </li>
                                <li>
                    <a href="#" data-layout="two_columns" data-min="" data-max=""><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/two_columns.png" /> <span>Two Columns</span></a>
                </li>
                        </ul>
        <a href="#" class="focus"></a>
    </div>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>