在Node.JS中如何提取带有指定name属性的第一个HTML元素？

实现方案 #

分不同运行环境给出可直接落地的实现逻辑：

1. 浏览器环境 #

直接调用浏览器原生DOMParser接口解析HTML字符串，配合属性选择器匹配即可，准确率和性能都有保障：

function getFirstElementByName(htmlStr, targetName) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlStr, 'text/html');
  // querySelector默认返回第一个匹配的元素，符合需求
  return doc.querySelector(`[name="${targetName}"]`);
}

调用示例：

const testHtml = '<input type="hidden" name="username" value="user1"><input name="username" value="user2">';
const targetEl = getFirstElementByName(testHtml, 'username');
console.log(targetEl.value); // 输出 user1

2. Node.js 环境 #

Node.js没有内置DOM API，推荐用轻量的jsdom库实现，不建议用正则匹配（HTML不是正则文法，边缘场景极易匹配出错）：
首先安装依赖：
npm install jsdom
实现代码：

const { JSDOM } = require('jsdom');

function getFirstElementByName(htmlStr, targetName) {
  const dom = new JSDOM(htmlStr);
  return dom.window.document.querySelector(`[name="${targetName}"]`);
}

应急正则实现（仅临时用） #

如果实在不想引入任何依赖，可使用正则处理仅适用于格式规整、无特殊嵌套的HTML场景：

function getFirstElementByNameByReg(htmlStr, targetName) {
  const matchReg = new RegExp(`<[^>]+name\\s*=\\s*["']${targetName}["'][^>]*>`, 'i');
  const matchResult = htmlStr.match(matchReg);
  return matchResult ? matchResult[0] : null;
}

注意：正则方案无法处理属性值嵌套引号、标签内包含注释、name属性拆分到多行等边缘场景，生产环境优先使用DOM解析方案

内容的提问来源于stack exchange，提问作者John Hans