innerText最快但漏input实时值；textContent含隐藏文本却仍不读取表单value；二者均不处理contenteditable编辑态；完整提取需递归遍历并判断节点类型取nodeValue/value/textContent。
直接用 element.innerText 最快，但会漏掉 <input> 里用户刚输的值；真要完整匹配，得递归遍历 + 判断 value 属性。
为什么 innerText 和 textContent 不够用
浏览器原生的 innerText 返回渲染后可见文本，textContent 返回所有文本节点（含隐藏、注释、<script> 里的）。但两者都忽略表单控件的实时 value —— 比如一个空 <input type="text">，其 innerText 是空字符串，而用户实际已输入 “test”，这个值根本不会出现在 innerText 结果里。
常见错误现象：
前端搜索框搜不到表格里用户正在编辑的单元格内容；document.body.innerText.indexOf("关键词") 返回 -1，但页面明明显示着这个词。
-
innerText受 CSS 样式影响（比如display: none的元素不计入） -
textContent包含不可见字符（如换行、缩进），且仍不读取input/textarea/select的value - 二者都不处理
contenteditable元素的编辑态内容
getText() 递归提取函数怎么写
核心是遍历 childNodes，对每种节点类型做不同处理：文本节点取 nodeValue，表单元素取 value，普通元素取 textContent 并递归子节点。
立即学习“前端免费学习笔记（深入）”；
示例实现：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
function getText(elem) {
let result = '';
for (let i = 0; i < elem.childNodes.length; i++) {
const node = elem.childNodes[i];
if (node.nodeType === Node.ELEMENT_NODE) {
if ('value' in node && typeof node.value === 'string') {
result += node.value;
} else {
result += getText(node); // 递归
}
} else if (node.nodeType === Node.TEXT_NODE) {
result += node.nodeValue || '';
}
}
return result.trim();
}
- 必须用
childNodes（不是children），否则跳过文本节点 - 判断
'value' in node比node.tagName === 'INPUT'更健壮，能覆盖textarea、select、contenteditable元素 - 不建议在循环里拼接大量字符串，高频调用可改用
Array.push()+join('')
用 BeautifulSoup 批量处理本地 HTML 文件
Python 场景下，BeautifulSoup 的 .get_text() 默认不包含 input 的 value，需要手动补全。
实操建议：
- 先用
soup.find_all(['input', 'textarea', 'select'])找出所有表单元素 - 对每个元素，用
elem.get('value', '')提取属性值（注意：这是 HTML 中的初始value，非运行时值） - 若需模拟用户输入态，得用 Selenium 加载页面再执行 JS 获取
elem.get_attribute('value') - 批量搜索时，避免反复解析同一文件：用
with open(...)读一次，BeautifulSoup(html, 'html.parser')解析一次，再多次调用get_text()
性能提示：lxml 解析器比 html.parser 快 3–5 倍，尤其处理大文件时，推荐 BeautifulSoup(html, 'lxml')（需 pip install lxml）。
搜索前要不要预处理文本
直接 indexOf 或正则匹配容易失败，因为原始 HTML 文本含大量空白、换行、不可见字符。但过度清洗（比如全转小写、去标点）又可能破坏语义边界。
- 简单搜索：用
getText(elem).replace(/\s+/g, ' ').trim()合并空白，再includes() - 精确匹配短语：保留换行符（
\n），用split('\n')按段落切分后逐行搜，避免跨段误匹配 - 大小写敏感与否，取决于业务——搜索日志或代码通常区分大小写，用户内容一般不区分
- 避免用正则匹配中文关键词：
/关键词/gu即可，不用[\u4e00-\u9fa5]这类范围，易漏生僻字
最容易被忽略的一点：动态内容（如 Vue/React 渲染的 DOM）必须等框架挂载完成后再执行 getText()，否则拿到的是模板占位符或空节点。别在 DOMContentLoaded 就急着搜，加个 setTimeout 或监听框架就绪事件更稳。
