javascript - 使用 jQuery.serialize() 序列化时如何对表单内容进行 *HTML* 编码？

Question

jQuery 表单 .serialize()方法将表单内容序列化为字符串，并自动对字符串进行 URL 编码。然后，我的服务器会反转此过程，并在反序列化时对字符串进行 URL 解码。

但是我需要做的是在表单序列化之前对表单内容进行 HTML 编码。换句话说，如果用户在我的表单中的文本输入中输入 HTML，我希望使用 HTML 编码使其安全，然后完全按照上述描述进行传输(正常使用 URL 编码)。

让我举个例子来说明:

当前使用 .serialize() 的实现

1. User enters My name is <b>Fred</b> into a form input with name Details.
2. .serialize() serializes this as Details=My+name+is+%3Cb%3EFred%3C%2Fb%3E (URL-encoding)
3. The server deserializes the string and gets My name is <b>Fred</b> (URL-decoding)

我想要发生什么

1. User enters My name is <b>Fred</b> into a form input with name Details.
2. This gets HTML-encoded to My name is <b>Fred</b> (HTML-encoding)
3. .serialize() serializes this as Details=My+name+is+%26lt%3Bb%26gt%3BFred%26lt%3B%2Fb%26gt%3B (URL-encoding)
4. The server URL-decodes the string and gets My name is <b>Fred</b> (URL-decoding only)

我希望 .serialize()可能需要一个参数来指定表单内容应该是 HTML 编码的，但没有这样的运气。其他一些可能的解决方案是:

1. 在调用 .serialize() 之前，迭代表单输入并“手动”对其进行 HTML 编码:我宁愿不必这样做，因为它会使代码变得更困惑并且更不健壮。
2. 修改我的服务器以接受非 HTML 编码的值:出于各种原因，我不会讨论这是有问题的，而且不是一个实用的解决方案。

有没有更简单的解决方案？

Answer 1

解决方案是使用 jQuery 的 .serializeArray()并将 HTML 编码应用于循环中的每个元素。

换句话说，我必须改变这一点:

$.ajax({
    url: form.attr('action'),
    async: false,
    type: 'POST',
    data: form.serialize(),
    success: function (data) {
        //...
    }
});

对此:

// HTML-encode form values before submitting
var data = {};
$.each(form.serializeArray(), function() {
    data[this.name] = this.value
        .replace(/&/g, '&')
        .replace(/"/g, '"')
        .replace(/'/g, ''')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
});

$.ajax({
    url: form.attr('action'),
    async: false,
    type: 'POST',
    data: data,
    success: function (data) {
        //...
    }
});