在某种情况下，需要前端参考某个页面的字段，但是又没有这个页面的代码，之前只能一个一个的复制，以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字符串，格式完全符合你的要求。 - 可直接复制的数组格式：一个格式化的数组，你可以直接复制到你的代码中。