前端开发者必备：在浏览器控制台批量提取HTML表单字段名（Label）

在某种情况下，需要前端参考某个页面的字段，但是又没有这个页面的代码，之前只能一个一个的复制，以element-ui的form表单为例。

一般提取都是手动复制form的名称ctrl+c -> ctrl+v到代码里面去，然后我发现某个页面有50+的名称需要copy就想把html给ai然后让ai进行区分，结果ai有更加便捷通用的方法，使用脚本。

看到你提供了一个非常长的、包含大量字段的表单HTML结构，需要将其中的标签（label）名称提取出来。这确实是手动操作非常耗时的工作。

我将为你编写一个通用的JavaScript脚本，你可以直接在浏览器的开发者工具（DevTools）的Console（控制台）中运行，来批量提取这些名称。这个方法比手动复制粘贴要高效得多。

批量提取脚本与步骤

打开浏览器开发者工具 ：
在你打开的表单页面，按下 F12 键（或右键选择"检查"）打开开发者工具。 2 切换到 Console（控制台）标签页。
粘贴并执行以下脚本 ：
将下面的代码复制粘贴到控制台中，然后按回车键执行。

js 复制代码

// 方法一：提取页面上所有el-form-item的label文本
function extractFormLabels() {
  // 找到所有class包含'el-form-item__label'的label元素
  const labelElements = document.querySelectorAll('.el-form-item__label');
  
  // 如果没有找到，尝试在指定容器内查找（根据你提供的结构）
  if (labelElements.length === 0) {
    const container = document.querySelector('.wiv-dialog-body');
    if (container) {
      labelElements = container.querySelectorAll('.el-form-item__label');
    }
  }
  
  // 如果还是没找到，打印提示
  if (!labelElements || labelElements.length === 0) {
    console.warn('未找到符合条件的label元素，请检查页面结构或选择器。');
    return [];
  }
  
  console.log(`共找到 ${labelElements.length} 个label元素`);
  
  // 提取文本，去重（防止重复），并过滤空值
  const labels = Array.from(labelElements)
    .map(el => el.textContent?.trim())
    .filter(text => text && text !== '') // 过滤掉空字符串
    .filter((text, index, arr) => arr.indexOf(text) === index); // 去重
    
  return labels;
}

// 执行提取并生成你需要的格式
const extractedLabels = extractFormLabels();

// 打印提取到的原始标签数组
console.log('=== 提取的标签列表 ===');
console.log(extractedLabels);

// 打印为你所需的格式化数组（去除冒号）
console.log('\n=== 格式化后的数据（可直接使用） ===');
const formattedData = extractedLabels.map((label, index) => {
  // 去除标签末尾的冒号（如果有的话）
  const cleanLabel = label.replace(/[:：]$/, '');
  return {
    label: cleanLabel,
    value: '',
    prop: `field${index + 1}` // 这里生成了简单的prop，你可以根据需要修改
  };
});

// 将格式化后的数组输出到控制台
console.log(JSON.stringify(formattedData, null, 2));

// 同时提供一个更易复制的数组格式
console.log('\n=== 可直接复制的数组格式 ===');
console.log('[');
formattedData.forEach(item => {
  console.log(`  {
    label: '${item.label}',
    value: '',
    prop: '${item.prop}'
  },`);
});
console.log(']');

// 返回最终结果（可在控制台中查看 extractedLabels 变量）
console.log('\n提示：提取的数据已保存在变量 `extractedLabels` 和 `formattedData` 中。');

脚本执行结果

运行脚本后，你会看到控制台输出：

提取的标签列表：原始的、去重后的所有标签名称数组。
格式化后的数据 ：一个 JSON 字符串，格式完全符合你的要求。
可直接复制的数组格式：一个格式化的数组，你可以直接复制到你的代码中。