如何实现鼠标选中高亮网页文本后自动获取内容并提交到API接口

一、前端JS实现逻辑 #

核心思路是监听用户选中文本后的鼠标抬起事件，获取选中内容后通过异步请求提交到你的PHP接口，增加防抖逻辑避免重复提交。
你可以把这段JS嵌入到自己的站点页面中，如果需要在任意第三方网页生效，把代码封装为油猴脚本即可。

// 防抖函数，避免选中过程中频繁触发请求
function debounce(func, delay = 300) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  }
}

// 处理选中文本逻辑
const handleSelection = debounce(() => {
  // 获取选中的文本并去除首尾空白
  const selectedText = window.getSelection().toString().trim();
  // 选中内容不为空才提交
  if (selectedText.length > 0) {
    // 发送POST请求到你的API接口
    fetch('替换为你的PHP接口地址', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: `content=${encodeURIComponent(selectedText)}`
    }).then(res => res.json())
    .then(data => {
      // 可选：上传成功后的提示逻辑，比如控制台打印或者页面弹窗
      console.log('上传成功', data);
    }).catch(err => {
      console.error('上传失败', err);
    })
  }
})

// 监听鼠标抬起事件，触发选中文本检测
document.addEventListener('mouseup', handleSelection);

提示：你可以根据需求调整防抖的延迟时间，避免误提交或者重复提交

二、后端PHP接口实现 #

PHP接口负责接收前端提交的选中文本，你可以根据自己的需求扩展后续处理逻辑（比如存入数据库、内容分析等）。

<?php
// 配置CORS头，解决跨域问题，如果前端和接口同域名可以删除这三行
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');

// 只处理POST请求
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
  echo json_encode(['code' => 1, 'msg' => '请求方式错误']);
  exit;
}

// 获取提交的选中内容
$content = isset($_POST['content']) ? trim($_POST['content']) : '';
if (empty($content)) {
  echo json_encode(['code' => 2, 'msg' => '内容不能为空']);
  exit;
}

// 这里写你自己的业务逻辑，比如存入数据库、调用其他服务等
// 示例：写入本地文本文件
file_put_contents('./selected_texts.txt', date('Y-m-d H:i:s') . ' ' . $content . PHP_EOL, FILE_APPEND);

// 返回响应
echo json_encode(['code' => 0, 'msg' => '上传成功']);
exit;
?>

三、注意事项 #

• 如果前端页面和PHP接口不在同一个域名下，必须正确配置CORS头，否则浏览器会拦截跨域请求
• 生产环境使用建议给接口加签名校验、频率限制，避免被恶意调用
• 如果你的站点是HTTPS协议，API接口也必须使用HTTPS，否则浏览器会拦截混合内容请求
• 如果你需要获取选中内容所在的页面地址、选中位置等信息，可以在前端请求时额外提交对应的参数

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