如何获取Google reCAPTCHA的文本内容？使用jQuery获取返回空值

问题原因 #

Google reCAPTCHA是异步加载的资源，$(document).ready触发时，reCAPTCHA的DOM元素还未完全渲染到页面中，此时通过选择器无法获取到目标文本。此外，目标标签内嵌套了空span，直接调用text()会包含多余空白字符，也可能导致显示为空的视觉效果。

解决方案 #

方案1：利用reCAPTCHA官方加载回调

通过reCAPTCHA的onload回调，在组件完全加载后再执行文本获取操作：

// 定义加载完成后的回调函数
function onRecaptchaLoaded() {
  var captchaText = $('#recaptcha-anchor-label').text().trim();
  alert(captchaText);
}

引入reCAPTCHA脚本时指定回调参数：

<script src="https://www.google.com/recaptcha/api.js?onload=onRecaptchaLoaded&render=explicit" async defer></script>

方案2：用MutationObserver监听DOM变化

如果无法修改reCAPTCHA的加载方式，可通过监听DOM变化，等待目标元素出现后再获取文本：

$(document).ready(function() {
  const targetContainer = document.querySelector('.rc-anchor-center-container');
  if (!targetContainer) return;

  const observer = new MutationObserver((mutations) => {
    mutations.forEach(() => {
      const captchaLabel = document.getElementById('recaptcha-anchor-label');
      if (captchaLabel) {
        const captchaText = captchaLabel.textContent.trim();
        if (captchaText) {
          alert(captchaText);
          observer.disconnect(); // 获取到文本后停止监听
        }
      }
    });
  });

  // 配置监听选项：监听子元素变化及子树
  observer.observe(targetContainer, { childList: true, subtree: true });
});

方案3：延迟执行（不推荐，稳定性差）

通过setTimeout延迟执行获取操作，等待reCAPTCHA加载完成（时间需根据实际情况调整）：

$(document).ready(function() {
  setTimeout(() => {
    var captchaText = $('#recaptcha-anchor-label').text().trim();
    alert(captchaText);
  }, 2000); // 延迟2秒执行
});

注意点 #

调用text()后记得加上trim()，可以去除标签内的空白字符和换行，确保获取到干净的目标文本。

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