如何检测使用jQuery点击的链接中的扩展名答案

【问题标题】：How to detect the name extension in the link clicked using jQuery如何检测使用jQuery点击的链接中的扩展名
【发布时间】：2021-10-06 23:33:34
【问题描述】：

我知道如何创建模态窗口，但我找不到解决方案来检测用户单击的链接地址中的名称扩展名，然后显示模态表单。

只有在单击包含 .MP3 / .AVI 扩展名的链接时，我才需要显示模式窗口。

<table id="list">
    <tr><td class="link"><a href="file.avi">video file.avi</a></td></tr>
    <tr><td class="link"><a href="file.txt">text file.txt</a></td></tr>
    <tr><td class="link"><a href="file.pdf">pdf file.pdf</a></td></tr>
    <tr><td class="link"><a href="file.mp3">video file.mp3</a></td></tr>
</table>

【问题讨论】：

这能回答你的问题吗？ How to get the clicked link's href with jquery?
不，只有在单击包含 .MP3 / .AVI 扩展名的链接时，我才需要显示模式窗口。感谢您的回复。
点击时拆分你的href值，获取文件扩展名并做任何你想做的事情。 (".link a").click(function() { var herf = $(this).attr("href"); var ext = herf.split('.')[1]; alert(ext); } );
感谢“Shree”，我在文档中通过了 .split。也感谢“showdev”。

标签： javascript html jquery hyperlink

【解决方案1】：

你可以在 jquery 中使用text()。

    $('.link a').click(function(){
        var link = $(this).text();
        $("#write").text(link)
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="list">
    <tr><td class="link"><a href="javascript:void(0)">video file.avi</a></td></tr>
    <tr><td class="link"><a href="javascript:void(0)">text file.txt</a></td></tr>
    <tr><td class="link"><a href="javascript:void(0)">pdf file.pdf</a></td></tr>
    <tr><td class="link"><a href="javascript:void(0)">video file.mp3</a></td></tr>
</table>
<p id="write"></p>

【讨论】：

【解决方案2】：

已解决，解决方法如下：仅在单击包含 .txt、.pdf、.jpg 扩展名的链接时才显示模态窗口。

除了以斜线结尾的链接外，还包括不带扩展名的链接，如果您不想包含它们，请将模式替换为：

/^(.(?!.*\.txt|.*\.pdf|.*\.jpg|.*\.jpeg|.*\.png))*$/

$('.link a').each(function(){

    // modal login for documents, images and files without extension
    var herf = $(this).attr("href");     
    if(herf.match(/^(.(?!.*\.txt|.*\.pdf|.*\.jpg|.*\.jpeg|.*\.png|.*\/))*$/)) {
        $(this).attr('data-bs-toggle', 'modal').attr('data-bs-target', '#exampleModal');
    }
});

<table id="list">
    <tr><td class="link"><a href="file.avi">avi file</a> deny</td></tr>
    <tr><td class="link"><a href="file.txt">txt file </a> allow</td></tr>
    <tr><td class="link"><a href="file.mp3">mp3 file </a> deny</td></tr>
    <tr><td class="link"><a href="file.jpg">jpg file</a> allow</td></tr>
    <tr><td class="link"><a href="file">empty file</a> deny</td></tr>
    <tr><td class="link"><a href="dir/">directory/</a> allow</td></tr>
</table>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://getbootstrap.com/docs/5.0/assets/css/docs.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

【讨论】：