Добавить класс к текущей ссылке, если она соответствует текущей ссылке?

Question

Я использую этот скрипт для выделения текущей ссылки (добавить активный класс):

<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$(function() {
  $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});
});
</script>



<li><a href="/category/english/this/?s=<?php
echo '' . htmlspecialchars($_GET["s"]) . '';
?>/">this</a></li>

<li><a href="/category/english/that/?s=<?php
echo '' . htmlspecialchars($_GET["s"]) . '';
?>/">that</a></li>

Это соответствует сначала /, например /category, а затем подсвечивает все в меню или любые ссылки, которые начинаются с /category/.... Я хочу, чтобы все были сопоставлены с третьим уровнем 1/2/3/whatever, поэтому, если, например, я на URL: /category/english/that/?s=what is this, я хочу, чтобы ссылки, содержащие /category/english/that/, были выделены.

Answer 1

Возможно, вам не нужно делить location.pathname. Попробуйте

let pathname = '/category/english/this';
$(function() {
  $('ul a[href^="' + pathname + '"]').addClass('active');
});

.active {
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li><a href="/category/english/this/?s=text">this</a></li>
  <li><a href="/category/english/that/?s=text2/">that</a></li>
</ul>