如何在JS/jQuery中嵌入生成HTML的PHP代码以避免语法错误？

在JS脚本的HTML字符串中执行PHP动作时，出现**Uncaught SyntaxError: Unexpected token '='**错误，原因是PHP输出的HTML包含换行、未转义的引号等内容，直接插入JS字符串会破坏语法结构。

原代码示例 #

<script type="text/javascript">
(function($) {
    $('.menu-main').on('click', function() {
        var page   = window.location.href;
        var mobile = $('.menu-item-mobile');
        var search = '<div class="wpml-language-switcher"><?php do_action('wpml_add_language_selector'); ?></div>';

        setTimeout(function() {
            if(mobile.find('form').length == 1) return;
            mobile.html(search);
        }, 50);  //delay time   
    });
})(jQuery);
</script>

报错后的输出代码（语法被破坏） #

<script type="text/javascript">
(function($) {
    $('.av-burger-menu-main').on('click', function() {
        var page   = window.location.href;
        var mobile = $('.menu-item-search-mobile');
        var search = '<div class="wpml-floating-language-switcher">'
<div
     class="wpml-ls-statics-shortcode_actions wpml-ls wpml-ls-legacy-dropdown js-wpml-ls-legacy-dropdown" id="lang_sel">
    <ul>

        <li tabindex="0" class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-lv wpml-ls-current-language wpml-ls-first-item wpml-ls-item-legacy-dropdown">
            <a href="#" class="js-wpml-ls-item-toggle wpml-ls-item-toggle lang_sel_sel icl-lv">
                                                    <img
            class="wpml-ls-flag iclflag"
            src="https://sampledomain.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/lv.png"
            alt=""
            width=18
            height=12
    /><span class="wpml-ls-native icl_lang_sel_native">LV</span></a>

            <ul class="wpml-ls-sub-menu">
                
                    <li class="icl-en wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-en">
                        <a href="https://sampledomain.com/en/" class="wpml-ls-link">
                                                                <img
            class="wpml-ls-flag iclflag"
            src="https://sampledomain.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/en.png"
            alt=""
            width=18
            height=12
    /><span class="wpml-ls-native icl_lang_sel_native" lang="en">EN</span></a>
                    </li>

                
                    <li class="icl-ru wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-ru wpml-ls-last-item">
                        <a href="https://sampledomain.com/ru/" class="wpml-ls-link">
                                                                <img
            class="wpml-ls-flag iclflag"
            src="https://sampledomain.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/ru.png"
            alt=""
            width=18
            height=12
    /><span class="wpml-ls-native icl_lang_sel_native" lang="ru">RU</span></a>
                    </li>

                            </ul>

        </li>

    </ul>
</div>
'</div>';

        setTimeout(function() {
            if(mobile.find('form').length == 1) return;
            mobile.html(search);
        }, 50);  //delay time   
    });
})(jQuery);
</script>

解决方案 #

方法1：用PHP捕获并转义HTML内容 #

通过PHP的输出缓冲区捕获WPML生成的HTML，转义JS字符串中的特殊字符（换行、单引号等），再插入到JS中：

<script type="text/javascript">
(function($) {
    $('.menu-main').on('click', function() {
        var page   = window.location.href;
        var mobile = $('.menu-item-mobile');
        <?php
        // 开启输出缓冲区捕获WPML的HTML
        ob_start();
        do_action('wpml_add_language_selector');
        $wpml_html = ob_get_clean();
        // 转义JS字符串需要处理的特殊字符
        $wpml_html = str_replace(["\n", "\r", "'"], ["", "", "\\'"], $wpml_html);
        ?>
        var search = '<div class="wpml-language-switcher"><?php echo $wpml_html; ?></div>';

        setTimeout(function() {
            if(mobile.find('form').length == 1) return;
            mobile.html(search);
        }, 50);  //delay time   
    });
})(jQuery);
</script>

方法2：提前渲染隐藏容器，JS直接调用 #

把WPML语言选择器提前渲染到页面的隐藏元素里，点击时直接读取该元素的HTML内容，避免字符串拼接的问题：

<!-- 提前渲染隐藏的语言选择器模板 -->
<div id="wpml-lang-switcher-tpl" style="display: none;">
    <?php do_action('wpml_add_language_selector'); ?>
</div>

<script type="text/javascript">
(function($) {
    $('.menu-main').on('click', function() {
        var page   = window.location.href;
        var mobile = $('.menu-item-mobile');
        // 直接获取提前渲染好的HTML
        var search = '<div class="wpml-language-switcher">' + $('#wpml-lang-switcher-tpl').html() + '</div>';

        setTimeout(function() {
            if(mobile.find('form').length == 1) return;
            mobile.html(search);
        }, 50);  //delay time   
    });
})(jQuery);
</script>

方法3：使用WPML官方JS API（优先推荐） #

如果WPML提供了前端生成语言选择器的JS接口，直接调用官方API，既能避免语法问题，也能保证兼容性。

内容的提问来源于stack exchange，提问作者twelvell