Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ remove extension from file name

Posted by: Tiff 1998 May 7 2017, 12:36 AM

Hello,

I have a script that copies the anchor text when I click on a link and copies it to a text input. The problem I have is that I need to remove the file extension before it gets copied.
This is what I have:

CODE

$(function () {
    $('#rightbox a').on('click', function () {
        var text = $('#myfilename');
        text.val($(this).text());
        $Form.click();
    });
});

Any help would be very appeciated, I am completly new to javascript. I have found some info about regex and last indexof, but have no idea how to use them.

Sorry btw the links are like this:

CODE

<a href="/family_photos/filename1.jpg">filename1.jpg</a>
<a href="/family_photos/filename2.jpg">filename2.jpeg</a>

Posted by: Christian J May 7 2017, 07:57 AM

QUOTE(Tiff 1998 @ May 7 2017, 07:36 AM)

Hello,

I have a script that copies the anchor text when I click on a link and copies it to a text input.

Hello!

Normally, clicking a link loads a new page, which cancels any script on the first page. Are there more things going on here?

QUOTE

The problem I have is that I need to remove the file extension before it gets copied.

This is what I have:

CODE

$(function () {
    $('#rightbox a').on('click', function () {
        var text = $('#myfilename');
        text.val($(this).text());
        $Form.click();
    });
});

That's jQuery, which I don't know very well, but isn't "#myfilename" an ID? I think you'd have to get the clicked element's HREF value with this.href or this.getAttribute('href');.

Since the HREF value may contain the directory path (and not just the file name) you might split the HREF value by its slashes into an array with split('/');, where the file name is the last array segment.

Next, split the file name by its period sign(s) into an array, where the last segment will be the file extension. Discard that last segment with the pop() method.

If the file name doesn't contain any period signs, the array will now only contain a single segment, which is the file name. But if there are period signs (like in "dog.1.jpg") there will be two or more array segments, and you must join them together into a string again (with a period sign between each segment) using join('.');.

Regex could also be used, and is shorter but usually more tricky.

Posted by: pandy May 7 2017, 08:28 AM

But he already has the link text (or so he says). so, provided no file name contains more than one dot, it would be enough to split on the dot and pick the first bit (of two) out of the array.

CODE

var x = 'foo.jpg';
x = x.split('.');
x = x[0];
alert(x);

About indexOf(), it tells you the index position of a sub string. As an example, if the string is "abcdef", "c" has index 2. JS counts from zero. "a" has index 0. lastIndexOf() does what it sounds like, finds the index of the last occurrence of a substring. So lastIndexOf() would work even if the filename contains several periods.

When the index of the part you want to get rid of is known you could use the substring() method to catch the rest. It returns the substring between (and not including) two indexes.

CODE

var str = 'foo.bar.jpg';
var n = str.lastIndexOf('.'); //returns "4"
var name = str.substring(0,n); //returns "foo.bar"
alert(n);
alert(name);

How to get that into the jQuery stuff I don't know.

Posted by: Christian J May 7 2017, 01:08 PM

QUOTE(pandy @ May 7 2017, 03:28 PM)

But he already has the link text (or so he says).

I wasn't sure, since he wrote "anchor text". But if it really is link text you might simply use something like:

CODE

var link_txt=this.textContent;
link_txt=link_txt.replace('.jpg','');
link_txt=link_txt.replace('.jpeg','');
link_txt=link_txt.replace('.png','');

(add or remove replace operations, depending on how many different file extension types you use).

Posted by: Tiff 1998 May 8 2017, 12:20 AM

Hi guy's,

Thank you for the replies. Sorry I didn't get back to you sooner, one of my kids got sick so I've been looking after her.

I'll try out what you have provided my and see how I go. Thank you very much for your help.

Posted by: Tiff 1998 May 8 2017, 04:47 AM

I got it working. I ended up using regex, what a brain twister that is.
So my code now is:

CODE

$(function () {
    $('#rightbox a').on('click', function () {
        var text = $('#myfilename');
        text.val($(this).text());
var fileName =$(this).text();
        fileName = fileName.replace(/\.[^/.]+$/, "");
        text.val(fileName);
        $Form.click();
    });
});

Thank you for your help.