求助：如何获取用户粘贴的URL并检测其是否以jpg/gif/png结尾

嘿，我看你已经搞定了页面上现有链接的图片后缀检测，但在处理输入框的粘贴内容时踩了个小坑——你现在是页面一加载就直接去拿输入框的值，这时候输入框还空着呢，当然拿不到用户刚粘贴的内容啦！得把获取值和检测逻辑都放到paste事件的回调里面才行，而且还要注意粘贴操作的异步小细节。

先说说你现有代码的问题：

• 你写的var value = $('.snax-link-url').val();是在页面初始化时执行的，这时候用户还没进行任何粘贴操作，输入框自然是空的，所以后面的判断永远不会触发正确的提示。
• 就算把拿值的代码放到paste事件里，直接拿也可能有问题——因为paste事件触发时，浏览器还没来得及把粘贴的内容写入输入框，这时候拿到的还是旧值。

给你两种可行的解决方案：

方案一：等待输入框内容更新后再检测 #

这种方式简单直接，用setTimeout延迟一点时间，确保粘贴的内容已经写入输入框：

$('.snax-link-url').on("paste", function() {
  // 延迟100毫秒，给浏览器足够时间更新输入框内容
  setTimeout(() => {
    const inputValue = $(this).val();
    // 正则加个i修饰符，忽略大小写，兼容.JPG/.Png这类格式
    const imageSuffixRegex = /\.(jpg|gif|png)$/i;
    
    if (imageSuffixRegex.test(inputValue)) {
      alert('这是一张图片链接！');
    } else {
      alert('这个链接不是jpg/gif/png格式哦');
    }
  }, 100);
});

方案二：直接从剪贴板获取内容（更高效） #

不需要等输入框更新，直接通过事件对象拿到剪贴板里的内容，这种方式更及时：

$('.snax-link-url').on("paste", function(e) {
  // 从原生事件对象里获取剪贴板的文本内容
  const pastedContent = e.originalEvent.clipboardData.getData('text');
  const imageSuffixRegex = /\.(jpg|gif|png)$/i;
  
  if (imageSuffixRegex.test(pastedContent)) {
    alert('这是一张图片链接！');
  } else {
    alert('这个链接不是jpg/gif/png格式哦');
  }
  
  // 如果需要把剪贴板内容自动填入输入框，就保留下面这行，否则可以删掉
  // $(this).val(pastedContent);
});

另外，你之前对页面现有链接的检测逻辑是没问题的，可以继续保留。

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