JavaScript：将HTML字符串转换为JSON对象教程-html教程-PHP中文网

JavaScript：将HTML字符串转换为JSON对象教程

聖光之護

发布： 2025-10-11 11:31:21

原创

823人浏览过

JavaScript：将HTML字符串转换为JSON对象教程

本文详细介绍了如何在javascript中将包含url查询参数的html字符串转换为结构化的json对象。通过字符串清理、利用`urlsearchparams`解析以及`object.fromentries`进行对象构建，我们能够高效地提取键值对。教程还进一步探讨了如何将提取出的字符串值有选择地转换为数值类型，以满足不同数据处理需求，提供清晰的代码示例和专业指导。

在Web开发中，我们有时会遇到需要从非标准格式的字符串中提取数据并将其转换为结构化JSON对象的需求。一个常见的场景是，数据以URL查询参数的形式嵌入在HTML标签内，例如<html>cid1=2&cid2=3...</html>。本教程将指导您如何使用JavaScript有效地处理这类字符串，将其转换为易于操作的JSON格式。

理解原始数据格式与目标

假设我们有以下原始字符串：

let disposibleHTML = "<html>cid1=2&cid2=3&seqno=4&tdate=20220616&ttime=11355525&cname=Test E&payment_method=&payon=33&amount=5&productcode=gp&PaymentStatus=Approved</html>";

登录后复制

我们的目标是将其转换为如下所示的JSON对象：

{
    "cid1": "2",
    "cid2": "3",
    "seqno": "4",
    // ...以此类推
}

登录后复制

直接对字符串进行分割（如split("&")）并不能直接生成所需的键值对结构，因为它会产生一个索引化的数组，而不是一个以键名作为属性的对象。

立即学习“Java免费学习笔记（深入）”；

核心转换方法：利用URLSearchParams

JavaScript的URLSearchParams接口提供了一种便捷的方式来处理URL的查询字符串。虽然我们的数据不是标准的URL，但其内部结构（key=value&key=value）与查询字符串高度相似。因此，我们可以通过预处理字符串，使其符合URLSearchParams的解析要求。

步骤一：字符串清理

在将字符串传递给URLSearchParams之前，我们需要进行两项重要的清理工作：

移除HTML标签： 原始字符串包含<html>和</html>标签，这些是非数据部分，需要通过正则表达式移除。
解码HTML实体： URL参数中的&符号被编码为&。为了让URLSearchParams正确识别参数分隔符，我们需要将&替换回&。

const disposibleHTML = "<html>cid1=2&cid2=3&seqno=4&tdate=20220616&ttime=11355525&cname=Test E&payment_method=&payon=33&amount=5&productcode=gp&PaymentStatus=Approved</html>";

// 1. 移除HTML标签
const cleanedString = disposibleHTML.replace(/<\/?html>/g, '');
// 2. 将 & 替换为 &
const finalQueryString = cleanedString.replace(/&/g, '&');

console.log("清理后的查询字符串:", finalQueryString);
// 输出: cid1=2&cid2=3&seqno=4&tdate=20220616&ttime=11355525&cname=Test E&payment_method=&payon=33&amount=5&productcode=gp&PaymentStatus=Approved

登录后复制

步骤二：使用URLSearchParams和Object.fromEntries进行转换

有了清理后的查询字符串，我们可以将其传递给URLSearchParams构造函数。URLSearchParams实例提供了一个entries()方法，它返回一个迭代器，生成[key, value]对。Object.fromEntries()方法则可以将这样的键值对列表直接转换为一个JavaScript对象。

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

查看详情

将上述步骤整合，完整的转换代码如下：

const disposibleHTML = "<html>cid1=2&cid2=3&seqno=4&tdate=20220616&ttime=11355525&cname=Test E&payment_method=&payon=33&amount=5&productcode=gp&PaymentStatus=Approved</html>";

const result = Object.fromEntries(new URLSearchParams(
    disposibleHTML.replace(/<\/?html>/g, '').replace(/&/g, '&')
));

console.log("转换后的JSON对象 (字符串值):", result);
/*
输出:
{
    cid1: "2",
    cid2: "3",
    seqno: "4",
    tdate: "20220616",
    ttime: "11355525",
    cname: "Test E",
    payment_method: "",
    payon: "33",
    amount: "5",
    productcode: "gp",
    PaymentStatus: "Approved"
}
*/

登录后复制

此时，所有提取到的值都将是字符串类型。

进一步处理：将值转换为数值类型

在某些情况下，我们可能希望将那些表示数字的字符串值转换为实际的数值类型，例如amount或cid1。我们可以通过遍历生成的对象并进行条件判断来实现这一点。

const disposibleHTML = "<html>cid1=2&cid2=3&seqno=4&tdate=20220616&ttime=11355525&cname=Test E&payment_method=&payon=33&amount=5&productcode=gp&PaymentStatus=Approved</html>";

const resultWithStrings = Object.fromEntries(new URLSearchParams(
    disposibleHTML.replace(/<\/?html>/g, '').replace(/&/g, '&')
));

// 创建一个新对象或直接修改原对象
const resultWithNumbers = { ...resultWithStrings }; // 复制一份，避免直接修改原始结果

Object.entries(resultWithNumbers).forEach(([key, value]) => {
  // 使用 isFinite 检查值是否为有限数字（排除了 NaN, Infinity 等）
  // 并且确保不是空字符串，因为空字符串转换为数字会是 0，这可能不是我们想要的
  if (value !== '' && isFinite(value)) {
    resultWithNumbers[key] = +value; // 使用一元加号运算符将字符串转换为数字
  }
});

console.log("转换后的JSON对象 (数值化):", resultWithNumbers);
/*
输出:
{
    cid1: 2,
    cid2: 3,
    seqno: 4,
    tdate: 20220616,
    ttime: 11355525,
    cname: "Test E",
    payment_method: "",
    payon: 33,
    amount: 5,
    productcode: "gp",
    PaymentStatus: "Approved"
}
*/

登录后复制

在这个示例中，我们遍历了对象的所有键值对。对于每个值，我们首先检查它是否为非空字符串，然后使用isFinite()函数判断它是否可以被解析为一个有限的数字。如果满足条件，我们使用一元加号运算符（+value）将其转换为数字类型。

注意事项与总结

字符串清理的完整性： 本教程的清理方法适用于特定的<html>标签和&实体。如果您的原始字符串可能包含其他HTML标签、不同的HTML实体（如）或更复杂的结构，您可能需要调整正则表达式或使用更强大的HTML解析库。
URLSearchParams的健壮性： URLSearchParams能够很好地处理URL编码（例如空格被编码为%20），并能正确解析重复的参数名（尽管本例中没有）。
数值转换的精确性： isFinite()结合一元加号运算符是转换数字的有效方式。但请注意，如果字符串可能包含浮点数，这种方法也能正确处理。对于需要更严格类型检查或特定进制转换的场景，可能需要更复杂的解析逻辑（如parseInt()、parseFloat()并指定基数）。
错误处理： 如果输入字符串格式不符合预期，URLSearchParams会尝试解析，但结果可能不完整或不准确。在生产环境中，建议添加错误处理机制，例如检查result对象是否为空或是否包含所有预期字段。

通过上述方法，您可以高效且专业地将类似URL查询参数的HTML字符串转换为JavaScript中的JSON对象，并根据需要对数据类型进行进一步的精炼。这种技术在处理日志、嵌入式配置或从非标准API响应中提取数据时非常有用。

以上就是JavaScript：将HTML字符串转换为JSON对象教程的详细内容，更多请关注php中文网其它相关文章！