本文介绍如何使用
java
script 的 domparser 解析
html
字符串，并精准获取指定 input 元素（如 id="maxfuturereservationtimedays"）的 value 属性值，安全、高效地存入变量。
当你通过 fetch 获取 HTML 格式的响应文本（如服务器返回的表单片段），直接对原始字符串使用 includes() 或正则匹配虽可行，但脆弱且易出错——例如属性顺序变化、转义字符（如 &）、空格差异或嵌套结构都会导致解析失败。推荐方案是借助
浏览器
原生的 DOMParser，将 HTML
字符串解析
为真实的 DOM 文档，再利用熟悉的 DOM API 进行可靠查询。
以下为完整、可运行的示例代码（已适配你的 fetch 流程）：
⚠️ 关键注意事项：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
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 解析引擎，天然支持属性转义、命名空间、文档结构校验，远优于字符串匹配或正则，应作为首选方案。
立即学习
“
前端免费学习笔记（深入）
”；
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"
});