如何从页面上的 URL 中删除 http(s)？

Question

我正在从我的 CMS 动态地将 URL 拉入页面以作为页面内容的一部分，但我想通过使用 javascript 显示它而没有 http://（或 https://）部分。

基本上我想要这个：

要在页面上呈现为：

请看我的 HTML：

<div class="elementor-element elementor-element-0e4572c elementor-widget elementor-widget-heading" data-id="0e4572c" data-element_type="widget" id="partner-website-element" data-widget_type="heading.default">

  <div class="elementor-widget-container">

    <h5 class="elementor-heading-title elementor-size-default">

      <a href="https://www.theurl.com">Visit https://www.theurl.com</a>

    </h5>

  </div>

</div>

请注意，我在第一个 div 中添加了“partner-website-element”的 ID（我只能向该元素添加一个类或一个 ID）。

到目前为止，这是我的 javascript：

<script>

    var cleanurl = document.getElementById("partner-website-element").getElementsByTagName('a').innerHTML;

    cleanurl.replace(/http(s):\/\/(www)/gi, '');

</script>

当我加载页面时，我在控制台中收到错误消息：

Uncaught TypeError: Cannot read property 'replace' of undefined

PS：我不知道如果我正则表达式是正确的，因为还没有到目前为止，我只试过更换http用''，即cleanurl.replace(/http/gi, '');

Answer 1

在这里回答我自己的问题。这是我的工作代码/我最终做了什么（欢迎批评/改进想法），包括我自己添加的评论：<script>&nbsp; // Gets the URL of a link into the anchor text and removes extra characters.&nbsp; // Notes:&nbsp; // - This could most likely be done more elegantly since they are referencing the same element!&nbsp; // - This was done in a WP/Elementor page with weird selectors.&nbsp; var myanchor = document.querySelector(".partner-website-url.elementor-widget.elementor-widget-heading a");&nbsp; var myurl = document.querySelector(".partner-website-url.elementor-widget.elementor-widget-heading a").href;&nbsp; var cleanurl = myurl.replace(/http(s)://(www\.)/, '').replace(//+$/, '');&nbsp; myanchor.innerHTML += cleanurl;</script>

Answer 2

在访问 DOM 之前等待页面加载访问NodeList返回的第一个元素getElementsByTagName清理网址并重新设置&nbsp;document.onLoad = function () {&nbsp; &nbsp; &nbsp; &nbsp;var ele = document.getElementById("partner-website-element").getElementsByTagName('a');&nbsp; &nbsp; &nbsp; &nbsp;ele[0].innerHTML = ele[0].innerHTML.replace(/http(s):\/\/(www)/gi, '');&nbsp;}