使用 Javascript 替换 HTML 中的 href 文本答案

【问题标题】：replace href text in HTML using Javascript使用 Javascript 替换 HTML 中的 href 文本
【发布时间】：2016-05-03 21:22:44
【问题描述】：

是否可以使用Javascript 将以下代码中的href 值从href="http://**store**.mystitexxx.co.nz" 更改为href="http://**www**.mystitexxx.co.nz"？它需要特定于这个 DIV 或图像，即不是全局的

<div id="ctl00" class="hidden-xs">
   <h1 class="logo clearfix">
      <a href="http://store.mystorexxx.co.nz" title="My Store"><img class="img-responsive"src="/user/files/logo.png?t=1601271313" title="My Store" alt="My Store"/></a>
   </h1>
</div>

【问题讨论】：

我怀疑你没有在这里问完整的问题。您是否希望它始终替换为该网址？或者您是否希望它“检测”网址中是否已经存在www，如果没有，请添加www？
我总是想用那个确切的 url 替换它，但只是用 logo 图像，而不是页面上的其他地方

标签： javascript jquery html replace href

【解决方案1】：

由于您需要它特定于这个确切的链接，只需：

document.getElementById("link").href = "http://www.mystitexxx.co.nz";

<div id="ctl00" class="hidden-xs">
   <h1 class="logo clearfix">
      <a href="http://store.mystorexxx.co.nz" title="My Store" id="link"><img class="img-responsive"src="/user/files/logo.png?t=1601271313" title="My Store" alt="My Store"/></a>
   </h1>
</div>

使用 jQuery：

$("#link").attr("href", "http://www.mystitexxx.co.nz");

编辑：如果您无法控制 HTML 添加 ID。（如果你这样做了，你为什么要使用 Javascript 更改 href？：P）

document.querySelector("h1.logo a").href = "http://www.mystorexxx.co.nz";
//$("h1.logo a").attr("href", "http://www.mystitexxx.co.nz");

<div id="ctl00" class="hidden-xs">
   <h1 class="logo clearfix">
      <a href="http://store.mystorexxx.co.nz" title="My Store"><img class="img-responsive"src="/user/files/logo.png?t=1601271313" title="My Store" alt="My Store"/></a>
   </h1>
</div>

【讨论】：

谢谢，可惜img没有ID，不能直接加，有没有办法先用Javascript加？
我以为是你的代码，我不使用ID来编辑它。
要考虑的一件事是，您使用的 HTML 是否与您向我们展示的示例完全匹配。如果您有其他锚点，则必须修改代码以处理它们。在某些方面，您要替换的链接必须通过 ID 或其在标记中的位置来唯一标识。如果您需要更改多个链接，那么代码将完全不同。

【解决方案2】：

哎呀，似乎所有其他答案都很复杂。

很简单：

jQuery('h1.logo a').attr('href', 'http://www.mystitexxx.co.nz');

或者，如果您不知道该放在哪里/如何包含它，那么：

在您的 <head> 和 </head> 标记之间，添加以下内容：

<script>
    jQuery(function($) {
        $('h1.logo a').attr('href', 'http://www.mystitexxx.co.nz');
    }); 
</script>

而且，如果您还没有加载 jQuery，那么只需像这样添加它（同样，在 <head> 标签之间）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
    jQuery(function($) {
        $('h1.logo a').attr('href', 'http://www.mystitexxx.co.nz');
    }); 
</script>

【讨论】：

【解决方案3】：

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
    .selected{
        background-color : green;
    }
    </style>
<script>

    $(document).ready(function () {

        $('.logo a img.img-responsive').attr('src', "http://www.mystitexxx.co.nz")

    });
</script>
</head>
<body>
    <div id="ctl00" class="hidden-xs">
   <h1 class="logo clearfix">
      <a href="http://store.mystorexxx.co.nz" title="My Store"><img class="img-responsive"src="/user/files/logo.png?t=1601271313" title="My Store" alt="My Store"/></a>
   </h1>
</div>
</body>
</html>

【讨论】：