CODEWITHSUNDEEP
javascriptjqueryhtml
Poorya
Poorya

Reputation: 1320

what is the best way to partially modify anchor href in javascript

Im working on a piece of code to modify a dynamic anchor href in javascript. I've seen posts that suggest to .replace() the href completely. i was looking for a way to add extra page to the path as shown below.

original url: http://localhost:8000/2

change to: http://localhost:8000/page/2

HTML markup (laravel):

{% if posts.lastPage > 1 %}
<ul class="pagination">
    {% if posts.currentPage > 1 %}
    <li>
        <a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage-1) }) }}"aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
        </a></li>
    {% endif %}

    {% for page in 1..posts.lastPage %}
    <li class="{{ posts.currentPage == page ? 'active' : null }}">
        <a href="{{ this.page.baseFileName|page({ (pageParam): page }) }}">{{ page }}</a>
    </li>
    {% endfor %}

    {% if posts.lastPage > posts.currentPage %}
    <li><a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage+1) }) }}" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
    </a>
    </li>
    {% endif %}
</ul>
{% endif %}

Javascript:

$('.pagination').on( 'click', 'a', function( event ) {
    event.preventDefault();
    var postUrl = $(this).attr("href"); --> need to modify href path
    var post = "default ";
    post=  $.ajax({type: "GET", url: postUrl, async: false}).responseText;
    document.getElementById("container").innerHTML = post;
});

**note:**I have seen examples of using regex and split() used in window.location.href. is it possible to use regex or split() in href?

thanks.

Upvotes: 0

Views: 66

Answers (2)

Gabriel
Gabriel

Reputation: 2190

Why don't you just change the href property?

var postUrl = $(this).attr("href"); //get
$(this).attr("href",newUrl); //set

To build the new URL, you could use regexp, but it will depend on your URL structure. Based on your example, you could do something like:

  var newUrl = postUrl.replace(/((http|https):\/\/.+?\/)(.)/,"$1page/$3");

Explanation:

/                        Starts the regexp (note that this is not a string and it's delimited by /--it could be a string, too, tho)
    (                    Starts a new group, so we can use the match in the replacement
        (http|https)     Matches the strings http or https (just in case if the protocol may vary). It is also a group as is between brackets
        :\/\/            Must be followed by :// (the / are escaped with \)
        .                Can be followed by any character
        +?               This means that the previous element (the dot) must appear at least once and the ? makes it not greedy, matching the minimum number of time (otherwise it will match everything until the end of the string)
        \/               Followed by / (again, escaped)
    )                    End the group
    (                    Starts new group to match what is after http://localhost.../
        .                Matches anything
    )                    Ends the group
/                        End the expression

Then in the replacement

$1                       Inserts the first group, the first ( )
page/                    Followed by the string "page/"
$3                       Followed the third group

The second group is the http|https, we don't need it because it's already inside the first group.

Upvotes: 1

ovgu12
ovgu12

Reputation: 130

Just use replace for example:

var href =  $(this).attr("href");
href.replace(/(\/[0-9]+?)$/g, "/page$1");

Upvotes: 0

Related Questions