根据类名替换 HTML 元素？

Question

我的任务是用锚标记替换电话号码，并带有指向我们网站演示页面的链接和文本。我们使用白标软件，它不允许我简单地更改文本，因为它链接到后端面板，您可以在其中更改电话号码，但不能将其更改为其他任何内容。

电话号码所在的sn-p代码如下：

<div>
    <div class="col-xs-12">
        <p class="h6 margin-top-sm margin-bottom-sm text-center-xs">
            <i class="fa fa-phone margin-right-xs"></i>
            <strong class="hidden-xs">Call us now:</strong>
            <a class="text-info" href="tel:IRL +353 0000000 UK +44 00000000"><strong>IRL +353 00000000 UK +44 00000000</strong></a>
            <span class="margin-left-sm margin-right-sm text-gray-dark">|</span>
            <i class="fa fa-commenting-o margin-right-xs"></i>
            <a href="/contact-us" class="text-black"><strong>Contact Us</strong></a>
            <span class="margin-left-sm margin-right-sm text-gray-dark header-vertical-line">|</span>
            <i class="fa fa-question-circle-o margin-right-xs"></i>
            <a href="/faq" class="text-black">
                <strong class="hidden-xs">Check our FAQ</strong>
                <strong class="visible-xs-inline">FAQ</strong>
            </a>
        </p>
    </div>
</div>

我需要保留常见问题解答和联系页面的链接，但请删除：

<strong class="hidden-xs">Call us now:</strong>
<a class="text-info" href="tel:IRL +353 0000000 UK +44 00000000"><strong>IRL +353 00000000 UK +44 00000000</strong></a>

并将其替换为：

<a href="/demo">Book A Demo</a>

不更改任何其他内容或干扰网页上的任何其他内容。

我试图使用innerHTML.replace() 尝试它，但它不起作用。有人有什么建议吗？

我的尝试：

$(".col-xs-12").each(function(){ 
    $("strong", this).each(function(i,obj){ 
        if (i===0) { 
            $(this).html(""); 
        } else if(i === 1) { 
            var newHtml = '<a href="safetyfreelancer.com/demo">Book A Demo</a>'; 
            $(this).html(newHtml); 
         } 
     });
 });

Answer 1

在这种情况下，问题在于使用jQuery 选择器并将它们与锚标记一起使用。你可以在here找到更多关于他们的信息。

选择锚标签时，使用$('a[href^="tel"]')，这将选择所有href以tel开头的锚标签。这样，您将只选择包含电话号码的那些。然后你可以用任何方式操作它。

$('a[href^="tel"]').each(function(index, anchor) {
  $(anchor).prev('strong.hidden-xs').remove();
  $(anchor).html('book a demo');
  $(anchor).prop('href', '/demo');
});

Answer 2

您可以使用父节点的replaceChild 替换锚点，也可以使用removeChild 删除Call us now 文本。

function replaceCallUs() {
  const callUsElm = document.querySelectorAll("a[href^='tel']")[0];

  // Remove the `Call us now` text
  let callUsText = callUsElm.previousSibling;
  // // find the text element
  while(callUsText && callUsText.nodeType !== 1) {
    callUsText = callUsText.previousSibling;
}
 callUsText && callUsElm.parentNode.removeChild(callUsText);
 
  // Replace the call us anchor this the demo link
  var myLink = document.createElement("a");
  myLink.innerHTML = "Book A Demo";
  myLink.setAttribute('href', '/demo');
  
  callUsElm.parentNode.replaceChild(myLink, callUsElm);  

}

replaceCallUs();

<div>
    <div class="col-xs-12">
        <p class="h6 margin-top-sm margin-bottom-sm text-center-xs">
            <i class="fa fa-phone margin-right-xs"></i>
            <strong class="hidden-xs">Call us now:</strong>
            <a class="text-info" href="tel:IRL +353 0000000 UK +44 00000000"><strong>IRL +353 00000000 UK +44 00000000</strong></a>
            <span class="margin-left-sm margin-right-sm text-gray-dark">|</span>
            <i class="fa fa-commenting-o margin-right-xs"></i>
            <a href="/contact-us" class="text-black"><strong>Contact Us</strong></a>
            <span class="margin-left-sm margin-right-sm text-gray-dark header-vertical-line">|</span>
            <i class="fa fa-question-circle-o margin-right-xs"></i>
            <a href="/faq" class="text-black">
                <strong class="hidden-xs">Check our FAQ</strong>
                <strong class="visible-xs-inline">FAQ</strong>
            </a>
        </p>
    </div>
</div>