如何查找指定文本并选中其后的input元素？无标签表单填充需求

针对你这种没法修改源码、只能通过现有结构定位的场景，可以用JavaScript实现一个函数来精准找到目标文本后的input元素，直接上代码和说明：

实现函数 #

function findInputAfter(text) {
  // 先拿到表单所在的容器div
  const formContainer = document.getElementById('form-with-simple-text-instead-of-label-before-the-input-field');
  // 遍历容器内的所有子节点（包括文本节点和元素节点）
  const childNodes = formContainer.childNodes;
  
  for (let i = 0; i < childNodes.length; i++) {
    const node = childNodes[i];
    // 筛选出包含目标文本的有效文本节点（处理掉前后空格，匹配带冒号的文本）
    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim().startsWith(`${text}:`)) {
      // 从当前文本节点往后找，跳过空白节点，直到找到input元素
      let nextNode = node.nextSibling;
      while (nextNode) {
        if (nextNode.nodeType === Node.ELEMENT_NODE && nextNode.tagName === 'INPUT') {
          return nextNode;
        }
        nextNode = nextNode.nextSibling;
      }
    }
  }
  // 没找到对应input就返回null
  return null;
}

使用示例 #

// 获取Firstname对应的input并填充内容
const firstnameInput = findInputAfter('Firstname');
if (firstnameInput) {
  firstnameInput.value = '你的名字';
}

// 获取Lastname对应的input并填充内容
const lastnameInput = findInputAfter('Lastname');
if (lastnameInput) {
  lastnameInput.value = '你的姓氏';
}

注意事项 #

• 函数里依赖表单容器的id，如果网页里这个id有变动，需要同步修改getElementById的参数
• 如果需要忽略大小写匹配文本，可以把判断条件改成：

  node.textContent.trim().toLowerCase().startsWith(`${text.toLowerCase()}:`)
  

• 这个方案完全适配你给出的表单结构，如果网页后续调整了结构（比如把文本放进span标签里），需要根据新结构调整节点筛选逻辑

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