使用jQuery从href值中删除特定文本的正确方法

Question

从href value中删除特定文本的正确方法是什么?

下面是我的代码:

<li  class="nav-item" data-attr="Some value"><a  class="nav-link scroll-to" href="porcupinev.com.au/visit#directions" data-attr="Some value">Getting Here</a></li>
<li  class="nav-item" data-attr="Some value"><a  class="nav-link scroll-to" href="porcupinev.com.au/visit#map" data-attr="Some value">Getting Here</a></li>

我需要从每个href中删除'porcupinev.com.au/visit'，以便#充当没有前缀url的内部锚

使用TWIG模板引擎，但没有解决方案，因此需要jQuery解决方案

Answer 1

首先定义需要替换的前缀:

const prefix='porcupinev.com.au/visit'

然后找到所有以prefix开头的A元素。

$('a[href^="' + prefix + '"]')

并遍历更新href属性的每个属性:

$('a[href^="' + prefix + '"]').each(
(ind, el) => $(el).attr('href', $(el).attr('href').replace(prefix, ''))
)

更新:这里是完整的代码:

<li class="nav-item" data-attr="Some value"><a class="nav-link scroll-to" href="porcupinev.com.au/visit#directions"
data-attr="Some value">Getting Here</a></li>
<li class="nav-item" data-attr="Some value"><a class="nav-link scroll-to" href="porcupinev.com.au/visit#map"
data-attr="Some value">Getting Here</a></li>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script>
$(() => {
const prefix = 'porcupinev.com.au/visit'
$('a[href^="' + prefix + '"]').each(
(ind, el) => $(el).attr('href', $(el).attr('href').replace(prefix, ''))
)
})
</script>