基于类名替换HTML元素？

Question

我的任务是取代电话号码与一个锚标签与链接和文本到我们的网站演示页。我们使用白标软件，它不允许我简单地更改文本，因为它链接到后端面板，你可以在那里更改电话号码，但你不能更改它为其他任何东西。

电话号码所在的代码段如下：

<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 [phone] UK [phone]"><strong>IRL [phone] UK [phone]</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>

我需要保留到FAQ和联系人页面的链接，但要去掉这个：

<strong class="hidden-xs">Call us now:</strong>
<a class="text-info" href="tel:IRL [phone] UK [phone]"><strong>IRL [phone] UK [phone]</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

您可以使用parentNode的replaceChild替换锚点，也可以使用removeChild删除立即调用我们文本。

null

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 [phone] UK [phone]"><strong>IRL [phone] UK [phone]</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>

Answer 2

在本例中，问题是使用jQuery选择器并将它们与锚标记一起使用。你可以在这里找到更多关于他们的信息。

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

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