本文介绍如何使用 javascript 的 domparser 解析 html 字符串，并精准获取指定 input 元素（如 id="maxfuturereservationtimedays"）的 value 属性值，安全、高效地存入变量。
当你通过 fetch 获取 HTML 格式的响应文本（如服务器返回的表单片段），直接对原始字符串使用 includes() 或正则匹配虽可行，但脆弱且易出错——例如属性顺序变化、转义字符（如 &）、空格差异或嵌套结构都会导致解析失败。推荐方案是借助浏览器原生的 DOMParser，将 HTML 字符串解析为真实的 DOM 文档，再利用熟悉的 DOM API 进行可靠查询。
以下为完整、可运行的示例代码（已适配你的 fetch 流程）：
let result;
await fetch(request)
.then((response) => {
if (response.status === 200) {
console.log("Success");
return response.text(); // 注意：这里应 return，以便链式处理
} else {
throw new Error("Something went wrong on API server!");
}
})
.then(async (htmlText) => {
result = htmlText;
// ✅ 正确解析 HTML 字符串
const parser = new DOMParser();
const doc = parser.parseFromString(result, "text/html");
// ✅ 获取指定 ID 元素的 value 值（自动解码 HTML 实体，如 & → &）
const maxDaysElement = doc.getElementById("MaxFutureReservationTimeDays");
const maxDaysValue = maxDaysElement ? maxDaysElement.value : null;
console.log("MaxFutureReservationTimeDays =", maxDaysValue); // 输出: "20"
});⚠️ 关键注意事项：
- DOMParser.parseFromString() 第二个参数必须为 "text/html"（不是 "text/xml"），否则无法正确解析 HTML5 语法（如自闭合标签、布尔属性等）；
- 确保目标元素存在，建议添加存在性检查（如 maxDaysElement ? ... : null），避免 .value 报 Cannot read property 'value' of null 错误；
- response.text() 返回的是 Promise，需用 await 或 .then() 处理；你原代码中 result = response.text() 是错误的——它赋值的是 Promise 对象，而非解析后的字符串；
- 若需批量提取多个 值，可遍历 doc.querySelectorAll('input[id]') 并构建映射对象，比 getElementsByTagName 更精准（排除无 id 的 input）。
总结：DOMParser 是处理 HTML 字符串内容提取的标准、健壮、语义化方式。它复用了浏览器的 HTML 解析引擎，天然支持属性转义、命名空间、文档结构校验，远优于字符串匹配或正则，应作为首选方案。
立即学习“前端免费学习笔记（深入）”；
