douzi7711 2018-05-14 21:37
浏览 43
已采纳

如何创建脚本以自动化HTML中的链接交换？

I'm performing maintenance on a system that has hundreds of links on one page as follows:

<li> Revista alvo <a href="http://exemplo.com"> http://exemplo.com </a> </li>

Note that there is text outside the a tag. What I want to do, put this text inside the a tag with your supposed href, the example above would look like this:

<li> <a href="http://exemplo.com"> Revista alvo </a> </li>

I'm doing this change in hand but there are hundreds and hundreds of links, which makes the task tiring. Does anyone have any idea how I can script to do this? It can be in any language, PHP,JS etc.

</div>
  • 写回答

1条回答 默认 最新

  • douziqian2871 2018-05-14 22:09
    关注

    As you regarded, the text is HTML format, so you can easily, edit the HTML file and use jquery to apply changes to the dom like the following:

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>


</head>
<body>
<ul id="linksList">
  <li> Revista alvo <a href="http://exemplo.com"> http://exemplo.com </a> </li>
  <li> Revista alvo <a href="http://exemplo.com"> http://exemplo.com </a> </li>
  <li> Revista alvo <a href="http://exemplo.com"> http://exemplo.com </a> </li>
  <li> Revista alvo <a href="http://exemplo.com"> http://exemplo.com </a> </li>
  <li> Revista alvo <a href="http://exemplo.com"> http://exemplo.com </a> </li>
  <li> Revista alvo <a href="http://exemplo.com"> http://exemplo.com </a> </li>
  <li> Revista alvo <a href="http://exemplo.com"> http://exemplo.com </a> </li>
  <li> Revista alvo <a href="http://exemplo.com"> http://exemplo.com </a> </li>
  <li> Revista alvo <a href="http://exemplo.com"> http://exemplo.com </a> </li>
  <li> Revista alvo <a href="http://exemplo.com"> http://exemplo.com </a> </li>
  <li> Revista alvo <a href="http://exemplo10.com"> http://exemplo.com </a> </li>

  </ul>
  <a href="#" id="changeIt">Change</a>
  <script>
    $(document).ready(function(){     
      $("#changeIt").click(function(){
        $("#linksList li").each(function(){
          txt = $(this).text().split(' http://')[0].trim();
          lnk = $(this).children('a').text(txt)
          $(this).html(lnk)
        })
      })
    })
  </script>
</body>
</html>

    The edit should include,

    1. include jquery
    2. give the ul or ol that contains the li an id
    3. use the code supplied in the latter script tag which consider the given id to the list is linksList
    4. HTML link with id changeIt to invoke the code.

    This is an Online demo

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 用verilog实现tanh函数和softplus函数
  • ¥15 求京东批量付款能替代天诚
  • ¥15 slaris 系统断电后，重新开机后一直自动重启
  • ¥15 谁能帮我看看这拒稿理由啥意思啊阿啊
  • ¥15 关于vue2中methods使用call修改this指向的问题
  • ¥15 idea自动补全键位冲突
  • ¥15 请教一下写代码，代码好难
  • ¥15 iis10中如何阻止别人网站重定向到我的网站
  • ¥15 滑块验证码移动速度不一致问题
  • ¥15 Utunbu中vscode下cern root工作台中写的程序root的头文件无法包含