Match filename in <link href="/path/?????/?????/????.css" - javascript

Need to get the css file name from a link tag that is in a specific folder.
<link href="/assets/49f0ugdf8g/sub/style.css" -> style.css
Currently have
match(`<link .*?href="\/assets\/(.*?\.css)"/i)
Which returns the path minus "/assets/".
Can it be extended to remove the rest of the path and just return the file name.

It would be simpler not to use regex and to use the native JS String.split function:
var link = document.getElementsByTagName('link')[0]; // or whatever JS to get your link element
var filename = link.href.split('/').pop(); // split the string by the / character and get the last part

Sure:
match(<link .*?href="\/assets\/([^/]+\.css)"/i)
// ^^^^^ change here
I dropped the ? because you probably want the capture group to be greedy. Also used + rather than * on the assumption there will always be at least one character in the "file" name.

First, be warned.
Try this: "\/assets\/(?:[^\/">]+\/)*([^\/">]*?.css)".
The (?:...) is a non-capturing group.

Try:
match(`<link .*?href="\/assets\/(?:[^\/]*\/)*(.*?\.css)"/i)

var link = '<link href="/assets/49f0ugdf8g/sub/style.css">';
var match = link.match(/<link .*?href="(.*)">/i);
var filename = match[1].split('/').pop();

Related

Remove slashes from Start and end of the URL

I have a URL like :
var folderPath = 'files/New folder';
Here are the conditions that i want to prevent, For example user tries:
../../.././../../././../files/New folder
OR
../../.././../../././../files/New folder/../../././../.././
OR
./files/New folder/
Basically i need to extract the New folder from the URL thus i need the URL cleaned !
WHAT I HAVE TRIED?
Tried the following but it only removes the Multiple slashes '../' and './' from the start of the URL.
var cleaned = folderPath.replace(/^.+\.\//, '');
EXPECTED OUTPUT:
if someone can provide a function that cleans the url that will be much helpful.
files/New folder
How about a filter?
var oneSlash = (str) => str.split("/").filter(
word => word.match(/\w+/)
).join("/")
console.log(oneSlash(" ../../.././../../././../files/New folder"))
console.log(oneSlash("///../..///files/New folder///../"))
// this imaginary useless path ends up like the others
console.log(oneSlash("files/////New folder/"))
So here the idea is first using the regex i am taking out the match from the input string but it includes // extra which you also want to remove so in the callback function i removing those // also using replace on matched group.
I guess this (using replace twice) still can be improved i am trying to improve a bit more.
function replaceDots(input){
return input.replace(/^[./]+([^.]+)\/?.*/g, function(match,group){
return group.replace(/(.*?)\/*$/, "$1")
})
}
console.log(replaceDots(`../../.././../../././../files/New folder`))
console.log(replaceDots(`files/New folder`))
console.log(replaceDots(`../../.././../../././../files/New folder/../../././../.././`))
console.log(replaceDots(`///../..///files/New folder///../`))
You can use this regex to remove all unwanted text in your path,
\/?\.\.?\/|\/{2,}|\/\s*$
\/?\.\.?\/ this removes all patterns of type ../ or ./ or /../ and \/{2,} removes all occurrences of two or more / and \/\s* removes all trailing slashes in the path.
Demo
console.log('../../.././../../././../files/New folder'.replace(/\/?\.\.?\/|\/{2,}|\/\s*$/g,''));
console.log('../../.././../../././../files/New folder/../../././../.././'.replace(/\/?\.\.?\/|\/{2,}|\/\s*$/g,''));
console.log('./files/New folder/'.replace(/\/?\.\.?\/|\/{2,}|\/\s*$/g,''));
console.log('///../..///files/New folder///../'.replace(/\/?\.\.?\/|\/{2,}|\/\s*$/g,''));
To remove all / preceded by . or / plus ending /:
var folderPaths = [
"../../.././../../././../files/New folder",
"../../.././../../././../files/New folder/../../././../.././",
"./files/New folder/"
];
var re = new RegExp('(?:[./]+)/|/$', 'g');
folderPaths.forEach(e => console.log(e.replace(re, "")));

Get the file name from Css propery background url

$('.icon-displayer').css('background-image');
console.log(a)
gives me value as url("http://localhost:8080/myApp/icons/xing-square.png")
from this string i want extract only the file name i.e xing-suare.png how do i do it?
I tried
var url= $('.icon-displayer').css('background-image');
var filename = url.split('/').pop()
did not work
Javascript pop method remove the last element from an array. Use split and then get the last position of the array.
var url= $('.balaIconPicker-icon-displayer').css('background-image');
var array = url.split('/');
var filename = array[array.length - 1];
If there are no parameters, then Lucas's answer is okay and it's the one you should use. However if the string at the end is something like "test.php?id=125" you will get the "?id=125" too which may not be what you want. A regular expression can save you from this:
var url = "http://www.test.com/directory/test.php?id=128",
cleanRegexp = /\/([^\.\/]+\.[a-z]{0,3})[^\/]*$/;
var result = cleanRegexp.exec(url);
window.alert(result[1]);
the regular expression finds the last slash, then looks after it for anything that isn't a slash or a dot, then grabs the dot and the extension, finishing before any special characters.
Here is the Fiddle

Regular expression to find file name using any Javascript based library

I am working with markdown editor. After user uploads an image I see following line being entered on the editor.
![](/assets/img/content/id/2e65c657cf609fca24893278cdcb2159.gif)
What I want is: I want to extract the file name by searching content of entire editor.
assume I have following content on my editor:
Hello world.pdf
![](/assets/img/content/id/2e65c657cf609fca24893278cdcb2159.gif)
This is a test
![](/assets/img/content/id/2e65c657cf609fcaeqwe78cdcb2159.png)adding text
Adding another image
![](/assets/img/content/id/2e65c657cf609f24432434423b2159.jpg)
From the above content, after running the regular expression, I should be able to get:
2e65c657cf609fca24893278cdcb2159.gif
2e65c657cf609fcaeqwe78cdcb2159.png
2e65c657cf609f24432434423b2159.jpg
I have tried something like this. Though its working, I am not sure its the best solution:
var myregex = /\(\/assets\/img\/content\/id\/(.+?)\)/gm
var result, allMatches = [];
while((result = myregex.exec(data)) != null) {
var match = result[1]; // get the first match pattern of this match
allMatches.push(match);
}
Use following regex:
var fileNames = content.match(/(\w+\.[a-z]{3,4})/gi);
REGEX Explanation
/: Delimiters of regex
(): Capturing Group
\w+: Matches one or more of any alphabetical character and _(underscore)
\.: Matches . literal
[a-z]{3,4}: Matches 3 to 4 alphabets
gi: Match all occurrences g and case insensitive i
DEMO
JsFiddle DEMO
UPDATE
var fileNames = content.match(/\!\[\].*?(\w+\.[a-z]{3,4})/gi);
fileNames = fileNames.toString();
var names = fileNames.match(/\w+\.[a-z]{3,4}/gi);
alert(names);
DEMO
Try this (for images)
/(\w+\.(?:gif|png|jpe?g))/gi
demo
or for any file type
/(\w+\.(?:\w{2,4}))/gi
demo
UPDATE
Based on comments made on #Tushar's answer
(?:\/assets\/img\/content\/id\/)(\w+\.(?:\w{2,4}))
will find any file with the preceding path /assets/img/content/id/. As one of the tags stated javascript we cannot use a positive lookbehind
demo

Extracting elements from a variable

I have a string 'http://this.is.my.url:007/directory1/directory2/index.html' and I need to extract the string as below. Please advice the best way
var one = http://this.is.my.url:007/directory1/directory2/index
Try this:
var url = 'http://this.is.my.url:007/directory1/directory2/index.html';
url.replace(/\.[^.]*$/g, ''); // would replace all file extensions at the end.
// or in case you only want to remove .html, do this:
var url = 'http://this.is.my.url:007/directory1/directory2/index.html';
url.replace(/\.html$/g, '');
The $ character when included in a regular expression matches to the end of the text string. In variant a you look start at the "." and remove everything from the this character until the end of the string. In variant 2, you reduce this to the exact string ".html". This is more about regular expressions than about javascript. To learn more about it, here is one of many nice tutorials.
var url = 'http://this.is.my.url:007/directory1/directory2/index.html';
var trimmedUrl = url.replace('.html', '');
You just need to use replace():
var url = 'http://this.is.my.url:007/directory1/directory2/index.html';
var one = url.replace('.html', '');
If want to ensure you only remove the .html from the end of the string use regex:
var url = 'http://this.is.my.url:007/directory1/directory2/index.html';
var one = url.replace(/\.html$/', '');
The $ indicates that only the last characters of the string should be checked.
Using a regular expression, it replaces everything (.*) with itself from the capture group (not including the trailing .html).
var url = 'http://this.is.my.url:007/directory1/directory2/index.html';
var one = url.replace(/(.*)\.html/, '$1');
^ ^ ^^
// Capture group ______| |__________||
// Capture ----> Get captured content
You could slice the string up to the last dot:
var url = 'http://this.is.my.url:7/directory1/directory2/index.html';
url = url.slice(0,url.lastIndexOf('.'));
//=> "http://this.is.my.url:7/directory1/directory2/index"
Or in one line:
var url = ''.slice.call(
url='http://this.is.my.url:7/directory1/directory2/index.html',
0,url.lastIndexOf('.') );

Regex to match filename at end of URL

Having this text:
http://img.oo.com.au/prod/CRWWBGFWG/1t44.jpg
And other texts like this where the last 1 can be any other number and the last 44 can be any other number as well, I need a regex that will match /1t44.jpg.
Everything I've tried so far (/.+?\.([^\.]+)$) matches from the first slash (//img.oo.com.au/prod/CRWWBGFWG/1t44.jpg).
I'm using JavaScript, so whatever works on RegexPal should do.
Here's a simple Regex that will match everything after the last /:
/[^/]*$
If you want to match a filename with a very specific file extenstion, you can use something like this:
/\/\dt\d\d\.jpg$/
This matches:
a slash
followed by a digit
followed by the letter 't'
followed by two digits
followed by '.jpg' at the end of the string
Or, if you really just want the filename (whatever is after the last slash with any file extension), then you can use this:
/\/[^\/]+$/
This matches:
a slash
followed by one or more non-slash characters
at the end of the string
In your sample string of http://img.oo.com.au/prod/CRWWBGFWG/1t44.jpg, both of these will match /1t44.jpg. The first is obviously much more restrictive since it requires a specific format of the filename. The second matches any filename.
Other choices. In node.js development, you can use the path module and use path.parse() to break a path up into all of its various components.
And, there are various libraries written for the browser that will break up a path into its components too.
As Johnsyweb says, a regular express isn't really needed here. AFAIK the fastest way to do this is with lastIndexOf and substr.
str.substr(str.lastIndexOf('/'));
Of course you don't have to use a regular expression to split a string and pop the last part:
var str="http://img.oo.com.au/prod/CRWWBGFWG/1t44.jpg";
var parts = str.split("/");
document.write(parts.pop() + "<br />");
Based on answer of Scott, try this: (JavaScript)
var url = "http://img.oo.com.au/prod/CRWWBGFWG/1t44.jpg";
var path = url.replace(/(.*)([\\\/][^\\\/]*$)/, "$1" );
var lastElement = url.replace(/(.*)([\\\/][^\\\/]*$)/, "$2" );
This can be also matched for Windows/Nix file path, to extract file name or file path :
c:\Program Files\test.js => c:\Program Files
c:\Program Files\test.js => \test.js
This is for Java on a Linux machine. It grabs the last part of a file path, so that it can be used for making a file lock.
// String to be scanned to find the pattern.
String pattern = ".*?([^/.]+)*$";
// Create a Pattern object
Pattern r = Pattern.compile(pattern);
// Now create matcher object.
Matcher match = r.matcher("/usr/local/java/bin/keystore");
/**
* Now you have two matches
* #0 /usr/local/java/bin/keystore
* #1 keystore
*/
String fileLock = "";
if (match.find()) {
fileLock = match.group(1) + ".lock";
}
A little different than the original question, I know. But I hope this helps others who were stuck with the same problem I had.

Categories