如何移除字符串单双引号并通过jQuery AJAX传递适配谷歌翻译

你的问题根源在于HTML事件属性中的引号冲突和AJAX数据拼接的编码问题，下面一步步帮你解决：

问题分析 #

1. 引号截断参数：当$review_title包含双引号时，比如"New "home" away from home"，直接写到onchange的函数参数里会导致JS语法错误。例如：

   onchange='translate_text("123","New "home" ...")'
   

   这里"New "后面的双引号会提前闭合第二个参数，浏览器根本无法正确解析这个函数调用，自然不会触发翻译逻辑。
2. AJAX字符串拼接的编码问题：用字符串拼接passDataAsStr时，参数中的特殊字符（比如&、=、引号）会破坏参数结构，后端无法正确解析请求。

解决方案 #

1. 改用HTML data-* 属性传递参数 #

把需要传递的变量存在select元素的自定义data属性里，彻底避免引号冲突：

<select name="langid" id="langid<@=review_id@>" class="guest clearfix" style="width: 150px;height: 29px;"
        data-review-id="<@=review_id@>"
        data-review-title="<@=review_title@>"
        data-your-view="<@=your_view@>"
        data-neg-review="<@=neg_review@>"
        onchange='translate_text(this);'>
</select>

额外优化：在PHP模板输出时，用htmlspecialchars转义变量，确保特殊字符不破坏HTML结构：

data-review-title="<?= htmlspecialchars($review_title, ENT_QUOTES) ?>"

ENT_QUOTES会同时转义单引号和双引号，彻底避免属性值被截断。

2. 重构JavaScript函数 #

从元素的data属性读取参数，并且用对象形式传递AJAX数据（jQuery会自动处理编码）：

function translate_text(selectElement) {
    // 从当前select元素获取数据
    var $select = jQuery(selectElement);
    var reviewId = $select.data('review-id');
    var reviewTitle = $select.data('review-title');
    var yourView = $select.data('your-view');
    var negReview = $select.data('neg-review');
    var lang = $select.val() === '0' ? 'en' : $select.val();

    var url = serverurl + 'index.php/feedback';
    showLoadingBar();

    jQuery.ajax({
        type: "POST",
        url: url,
        // 用对象传递数据，jQuery自动编码特殊字符
        data: {
            opcode: 'translate_text',
            positivereview: yourView,
            negativereview: negReview,
            title: reviewTitle,
            lang: lang
        },
        success: function(response) {
            hideLoadingBar();
            var res = jQuery.parseJSON(response);
            
            jQuery('#btnclose' + reviewId).show();
            jQuery('#trans_div' + reviewId).show();
            jQuery('#titleid_' + reviewId).text(res['title']);
            jQuery('#positiveid' + reviewId).text(res['posrev']);
            jQuery('#negativeid' + reviewId).text(res['negrev']);
        },
        // 增加错误处理，方便调试
        error: function(xhr, status, error) {
            hideLoadingBar();
            console.error('翻译请求失败:', error);
        }
    });
}

为什么这样能解决问题？ #

• data-* 属性是HTML标准的自定义属性，只要正确转义变量，不管里面有单引号、双引号还是其他特殊字符，都不会破坏HTML结构。
• AJAX用对象传递数据时，jQuery会自动对每个参数值调用encodeURIComponent，确保特殊字符（比如&、=、引号）被正确编码，后端能准确解析每个参数。

这样修改后，不管你的字符串里有什么特殊字符，都能正常触发翻译请求啦！

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