Replace colon in href attribute in JavaScript or jQuery

Question

I have a problem handling IDs with a colon in jquery. If there is a colon in an ID the smooth scroll doesn't work.

The HTML

<a href="#fn:1">Go to Footnote 1</a>

<div id="fn:1>Lorem ipsum Bla Bla</div>

JS

  var $root = $('html, body');
  $('a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 400, function () {
        window.location.hash = href;
    });
    return false;
});

score 1 · Accepted Answer · answered Apr 11 '14 at 06:01

1

Do this:

$(function(){
    $('[href]').each(function(){
        $(this).attr('href',$(this).attr('href').replace(/:/g,""));
    });
});

That will remove : from all href

answered Apr 11 '14 at 06:01

Amit Joki

53,955
7
67
89

Thank you Amit. I also removed ':' from 'id' so the links work. – mono Apr 11 '14 at 06:22
Glad to have helped you :) – Amit Joki Apr 11 '14 at 06:23

score 0 · Answer 2 · answered Apr 11 '14 at 06:08

Try this.

var $root = $('html, body');
  $('a').click(function() {
    var href = $.attr(this, 'href'),
        href = href.split(':'),
        href = href.join('\\:');
      alert(href)
    $root.animate({
        scrollTop: $(href).offset().top
    }, 400, function () {
        window.location.hash = href;
    });
    return false;
});

Demo Fiddle

score 0 · Answer 3 · edited May 23 '17 at 12:21

You need to replace # with \\# and : with \\: to escape the character and to make it work:

var $root = $('html, body');
  $('a').click(function() {
      var href = $.attr(this, 'href').replace(/:/g,"\\\\:");
      href = href.replace(/#/,"\\\\#");
    $root.animate({
        scrollTop: $(href).offset().top
    }, 400, function () {
        window.location.hash = href;
    });
    return false;
});

See more about escaping the character here

Replace colon in href attribute in JavaScript or jQuery

3 Answers3