根据类名替换 HTML 元素？

Posted 2023-05-09

【中文标题】根据类名替换 HTML 元素？

【英文标题】：Replacing HTML element based on the classname?

【发布时间】：2021-06-22 08:21:45

【问题描述】：

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

电话号码所在的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 [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>

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

<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); 
          
     );
 );

【问题讨论】：

到目前为止你尝试了什么？

` ` 尝试了上述方法，但它影响了其他元素我也尝试使用.innerHTML.replace，但它也不起作用

麻烦你把这个放在问题里，回答的时候会更容易阅读和复制

【参考方案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');
);

【讨论】：

好答案。我冒昧地还删除了<strong> 标签，就像在问题中一样。这种方法修改了原来的<a> 标记，这意味着保留了类（text-info）和事件处理程序（如果有）等属性。如果您 (@IAmAndy) 不想这样做，您也可以使用 $(anchor).replaceWith('<a href="/demo">...</a>') 而不是 .html() 和 .prop()。这样就形成了一个全新的标签。

【参考方案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 [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>