如何检测使用 jQuery 单击的 link 中的扩展名

Question

我知道如何创建模态 windows 但我找不到解决方案来检测 link 地址中的扩展名，用户点击后会显示模态形式。

仅当单击包含 .MP3 / .AVI 扩展名的 link 时，我才需要显示模式 window。

<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>

Answer 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>

Answer 2

已解决，解决方法如下：仅当 link 包含 .txt、.pdf、.jpg、名称时显示模式 window扩展被点击。

没有扩展名的链接也包括在内，但以斜杠结尾的链接除外，如果您不想包括它们，请将模式替换为：

/^(.(?!.*\.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>

如何检测使用 jQuery 单击的 link 中的扩展名

How to detect the name extension in the link clicked using jQuery

html

javascript

jquery

hyperlink