jQuery anchor tag text re-write project

1 Views

I have a wordpress site that im list out files in a directory. The code gets spit out as 

<a href="http://helpdesk-3/acme/wp-content/uploads/important_documents/compliance_documents/sample_document.pdf">sample_document.pdf</a>

Im trying to wrap my head around using jQuery to re-write the link display text to camel case, no extension, and spaces. So it would run and re-write it as

Read More
<a href="http://helpdesk-3/acme/wp-content/uploads/important_documents/compliance_documents/sample_document.pdf">Sample Document</a>

Does anyone have a suggestion?

Post Views: 1

Related posts

Leave a Reply

5 comments 

  1. $('a').each(function() { // Loop over all links
    var txt = $(this).text().split('.'); // Link contents, split on '.'
    txt.pop(); // remove last (the extension)
    txt = txt.join('.').replace(/_/g, ' '); // replace '_' with spaces
    txt = $.map(txt.split(' '), function(v) { // split on spaces
        // and uppercase the 1st letter
        return v.substring(0, 1).toUpperCase() + v.substring(1, v.length);
    }).join(' ');
    $(this).text(txt); // set the new text
});​

    DEMO: http://jsfiddle.net/f6x9P/1/

  2. Since you’re using WordPress, it would probably be easier to just use PHP.

    <?php
    $doc = 'sample_document.pdf';
    $array = explode('.', $doc);
    $string = ucwords(str_replace('_', ' ', $array[0]));
    echo $string;

  3. //setup function to capitalize each word in a string, breaking the string at the underscore characters
function capitalize (str) {

        //get each word
        var split = str.split('_');

        //loop through the words
        for (var i = 0, len = split.length; i < len; i++) {

            //set the first letter to uppercase, and the rest to lowercase
            split[i] = split[i].charAt(0).toUpperCase() + split[i].slice(1).toLowerCase();
        }

        //now return the new string, words separated by spaces
        return split.join(' ');
}

//select the elements you want to update, then update their text
$('a').text(function (index, oldText) {
    return capitalize(oldText);
});

    This will take care of spaces.

    When you pass .text() a function, you are asking to loop over the elements selected, and update their text. Whatever you return will be the new text, and the anonymous function is passed the index of the current element in the selection and the current element’s value: http://api.jquery.com/text

  4. Very likely need to create a far better selector than looping every a tag in page

    $('a').each(function() {
    var $this = $(this);
    var txtArr = $this.text().split('.')[0].split('_');
    for (i = 0; i < txtArr.length; i++) {
        txtArr[i] = txtArr[i].charAt(0).toUpperCase() + txtArr[i].slice(1);
    }
    $this.text(txtArr.join(' '));
});

  5. Sure. But strainght javascript is used for string manipulation. You want to get the text value of the anchor:

    atext = $('a').text();

    Then apparently you want to strip off the pdf extension. I’ll assume there is only one period in the filename, and extension could be anything:

    atext = atext.split('.');

    atext[0] now contains everything to left of period. Assume that underscore is the seperator:

    atext = atext[0].split('_');
    camel = ''

    for word in atext {
  w = word.substring(0,1).toUppercase();
  w = w + word.substring(1);
  camel = camel + w + ' ';
}

    finally change the text in the tag:

    $('a').text(camel);

    There are things you’ll need to improve here. Using jQuery to get ‘a’ will return all anchors; so change the match string to be more specific. Or, if you do want to change all anchor tags, then you need to put all the string manipulation code in a function and apply it to all the matched anchor tags.