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

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

报告相同问题？

悬赏问题

  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度