Chrome控制台JS搜索div内takeID并提取指定字符间内容的问题排查

// 获取所有匹配class的div元素
const targetDivs = document.getElementsByClassName("activity activity-container-html5");
const searchKey = "takeID";

for (let i = 0; i < targetDivs.length; i++) {
  // 直接取config属性值，避免innerHTML的无关内容干扰
  const configStr = targetDivs[i].getAttribute("config") || "";
  if (configStr.includes(searchKey)) {
    // 替换HTML转义的&为普通字符统一处理
    const formattedStr = configStr.replaceAll("&amp;", "&");
    const keyIndex = formattedStr.indexOf(`${searchKey}=`);
    if (keyIndex === -1) continue;
    // 定位值的起止位置
    const valueStart = keyIndex + searchKey.length + 1;
    const valueEnd = formattedStr.indexOf("&", valueStart);
    const takeIdValue = valueEnd === -1 ? formattedStr.slice(valueStart) : formattedStr.slice(valueStart, valueEnd);
    // 输出结果，需要弹窗可替换为alert(result)
    const result = `${searchKey}=${takeIdValue}`;
    console.log(result);
    // 只需要第一个匹配结果可保留break，需要遍历所有匹配项删除即可
    break;
  }
}

原代码错误原因 #

• 类型使用错误：document.getElementsByClassName返回的是HTMLCollection类数组对象，不是字符串，直接对该对象调用lastIndexOf、substring等字符串专属方法，就会触发is not a function报错。
• 逻辑断层：for循环中仅判断了元素包含目标关键词，未把匹配到的元素内容提取出来，循环结束后直接操作原始类数组对象，完全无法拿到目标内容。
• 取值范围错误：takeID存储在div的config属性中，使用innerHTML会引入大量无关内容，增加匹配误差。
• 未处理转义字符：HTML属性里的&会被自动转义为&，直接搜索&会匹配失败，需要先做转义替换。

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