1,105,534 Community Members

Substring replacement troubles

Member Avatar
TySkby
Junior Poster
127 posts since Oct 2009
Reputation Points: 41 [?]
Q&As Helped to Solve: 19 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi all,

I've been struggling with different ways to solve a problem for about a week, and as my attempts have so far been fruitless, I figured I would turn to DaniWeb for some help.

I have an unordered list <ul class="navigation"> where each list item contains some links.

Example:

<ul class="navigation">
<li><a href="index.php?view=cover">COVER</a></li>
<li><a href="index.php?view=contents">CONTENTS</a></li>
<li><a href="index.php?view=cogito-ergo-hack">AROUND TOWN</a>
<ul class="sub">
<li><a href="index.php?view=cogito-ergo-hack">Cogito Ergo Hack</a></li><br />
<li><a href="index.php?view=now-boarding">Now Boarding</a></li><br />
<li><a href="index.php?view=higher-calling">Higher Calling</a></li><br />
</ul>
</li>
etc...

Basically, I'm trying to find a javscript function that finds the string "index.php?view=" in those links and replaces it with a "#" (hash symbol) when the page loads/document is ready.

I did the Google searches and every method I've tried seems to fail at doing anything- The scripts that I've tried have mostly been modified from web tutorials and, like I said, they haven't worked in the slightest. But if it would be helpful, I can post some of what I've tried if anyone would like.


SUMMARY:
I'm trying to change this:

<ul class="navigation">
    <li><a href="index.php?view=cover">COVER</a></li>
    <li><a href="index.php?view=contents">CONTENTS</a></li>
    <li><a href="index.php?view=cogito-ergo-hack">AROUND TOWN</a>
        <ul class="sub">
            <li><a href="index.php?view=cogito-ergo-hack">Cogito Ergo Hack</a></li><br />
            <li><a href="index.php?view=now-boarding">Now Boarding</a></li><br />
            <li><a href="index.php?view=higher-calling">Higher Calling</a></li><br />
        </ul>
    </li>
etc...

to this:

<ul class="navigation">
    <li><a href="#cover">COVER</a></li>
    <li><a href="#contents">CONTENTS</a></li>
    <li><a href="#cogito-ergo-hack">AROUND TOWN</a>
        <ul class="sub">
            <li><a href="#cogito-ergo-hack">Cogito Ergo Hack</a></li><br />
            <li><a href="#now-boarding">Now Boarding</a></li><br />
            <li><a href="#higher-calling">Higher Calling</a></li><br />
        </ul>
    </li>
etc...

Extra Note: I'm using jQuery localscroll plugin, which is why I need these links changed to hashes.


Thanks in advance,
Ty

Member Avatar
scrappedcola
Posting Whiz in Training
219 posts since Dec 2009
Reputation Points: 11 [?]
Q&As Helped to Solve: 45 [?]
Skill Endorsements: 0 [?]
 
0
 

What have you tried so far that didn't work? Are you placing everything in an event handler for jquery's ready event or using the standard window.onload()? Basically what I would do would grab all the anchors, look at the href attribute, and then use the javascript test function to perform a regex test on the href string like this:

var href = "index.php?view=cover"; 
if(/^index\.php\?view=(.*)$/.test(href))
{
     href = href.replace(/^index\.php\?view=/,"#");
}
Member Avatar
TySkby
Junior Poster
127 posts since Oct 2009
Reputation Points: 41 [?]
Q&As Helped to Solve: 19 [?]
Skill Endorsements: 0 [?]
 
0
 

Thanks for the response, scrappedcola. I've got it working now with this code (placed within jquery's ready event):

$(".navigation").find("a").each(function(){
    var link = $(this).attr("href").toString();
    var eindex = link.indexOf("=", 0);
    link = "#"+link.substr(eindex+1);
    $(this).attr("href", link);
});

Although this seems very bulky and un-jQuery-ish (maybe it's just aesthetics, but I feel my code looks really ugly compared to the nice-looking localscroll settings).

This is probably obvious, but I'm very new to jQuery (although I'm loving it). I know there's a lot of emphasis on "chaining", and despite the fact that my function is really just 5 lines, it seems it could do with some housekeeping.

Fret not, I will definitely mark this thread as solved. But before I do, I was just wondering if you (or anyone else) had any suggestions as to how I might simplify (or pretty-fy) what I've gotten. I'm not opposed to using regex, but I'm not very well-versed in it quite yet.

Thanks again!

Member Avatar
Taywin
Posting Maven
2,632 posts since Apr 2010
Reputation Points: 134 [?]
Q&As Helped to Solve: 378 [?]
Skill Endorsements: 17 [?]
 
0
 

Hmm... Just give you a sample here for the future...

function replaceAllIndexPHP() {
  var elems = document.getElementsByTagName("a")
  for (var i=elems.length-1; i>=0; i--) {
    elems[i].href = elems[i].href.replace(/index\.php\?view=/i, "#")
  }
}
Question Answered as of 3 Years Ago by scrappedcola and Taywin
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: