Javascript splitting - javascript

lets say i have this variable
var image = "image.jpg";
I'm trying to split the content of the variable image and insert _thumbs into it to get something like image_thumbs.jpg.
How do i go about this?
Many Thanks.

function addSuffix(filename, suffix)
{
var pos = filename.lastIndexOf(".");
var left = filename.substring(0, pos);
var right = filename.substring(pos);
var result = left + suffix + right;
return result;
}
var image = "image.jpg";
var imageWithSuffix = addSuffix(image, "_thumbs");
// imageWithSuffix === "image_thumbs.jpg"
Or, just for fun, a much less readable but shorter solution using a regex:
function addSuffix2(filename, suffix)
{
return filename.replace(/\.[^\.]+$/, suffix + "$&");
}

var image = "image.jpg";
image = image.replace(".","_thumbs.");

Here is the solution
Way 1
var image = "image.jpg";
var splitVar = image.split(".");
alert(splitVar[0]);
alert(splitVar[1]);
alert(splitVar[0]+"_thumbs."+splitVar[1]);
Way 2
alert(image.replace(".","_thumbs."))
http://jsfiddle.net/LqpL3/1/

If the file name can contain multiple dots, you need to take the last of it. You can use Regex to do it:
var image = "image.jpg";
image = image.replace(/\.(?!.*\.)/, "_thumbs.");

Related

Add Javascript to replace Span tags

I have an online store that has limited access to make any correct edits to code.
I am trying to implement proper Price Schema as they have:
<span itemprop="price">$57.00</span>
This is incorrect.
It needs to be set up like this
<span itemprop="priceCurrency" content="USD">$</span>
<span itemprop="price">57.00</span>
Is there something in JavaScript or jQuery that can manipulate this by separating the Currency Symbol and Price?
Thanks
You get the ELEMENT text:
var value = $("span[itemprop='price'").text();
Then you could generate the html using regex like:
var html = '$57.00'.replace(/([^\d])(\d+)/,
function(all, group1, group2){
return 'some html here =' + group1 + '= more hear =' + group2 });
Might not be 100% bug-free, but it should get you started:
<script type="text/javascript">
var n = document.getElementsByTagName('*')
for(var i=0;i<n.length;i++)
{
if(n[i].hasAttribute('itemprop')) //get elements with itemprop attribute
{
var p = n[i].parentNode
var ih = n[i].innerHTML //grab the innerHTML
var num = parseFloat(ih) //get numeric part of the innerHTML - effectively strips out the $-sign
n[i].innerHTML = num
//create new span & insert it before the old one
var new_span = document.createElement('span')
new_span.innerHTML = '$'
new_span.setAttribute('itemprop', 'priceCurrency')
new_span.setAttribute('currency', 'USD')
p.insertBefore(new_span, n[i])
}
}
</script>
Somthing along the lines of
// find all span's with itemprop price
document.querySelectorAll("span[itemprop='price']").forEach(function(sp){
// grab currency (first char)
var currency = sp.innerText.substr(0,1);
// remove first char from price val
sp.innerText = sp.innerText.substr(1);
// create new element (our price-currency span)
var currencySpan = document.createElement("span");
currencySpan.innerText = currency;
currencySpan.setAttribute("itemprop", "priceCurrency");
currencySpan.setAttribute("content", "USD");
// Append it before the old price span
sp.parentNode.insertBefore(currencySpan, sp);
});
Should do what your after.
See demo at: https://jsfiddle.net/dfufq40p/1/ (updated to make effect more obvious)
This should work -- querySelectorAll should be a bit faster, and the regex will work with more than just USD, I believe.
function fixItemPropSpan() {
var n = document.querySelectorAll('[itemprop]');
for (var i = 0; i < n.length; i++) {
var p = n[i].parentNode;
var ih = n[i].innerHTML;
var num = Number(ih.replace(/[^0-9\.]+/g, ""));
n[i].innerHTML = num;
//create new span & insert it before the old one
var new_span = document.createElement('span');
new_span.innerHTML = '$';
new_span.setAttribute('itemprop', 'priceCurrency');
new_span.setAttribute('currency', 'USD');
p.insertBefore(new_span, n[i]);
}
}
Here is a suggestion of how you can make this work, though i would not suggest doing it like this (too many cases for content="").
Example of the logic you could use to transform the incorrect format to the correct one.
Hope you find it useful. :]

javascript: get hex from long url

For example i have such urls:
https://portalvhdsk7w6i7k9.blob.core.windows.net:443/project/5633cc12da73d9160c4cf146.dat
https://portalvhdsk7w6i7k9.blob.core.windows.com/project/5633cc12da73d9160c4cf146.dat
https://example.com/project/5633cc12da73d9160c4cf146.dat
can i somehow get only 5633cc12da73d9160c4cf146 using only js? is it possible?
You can split the string by / and the pop() the final element. Try this:
var url = 'https://portalvhdsk7w6i7k9.blob.core.windows.net:443/project/5633cc12da73d9160c4cf146.dat'
var hex = url.split('/').pop().replace('.dat', ''); // = '5633cc12da73d9160c4cf146'
If you want to get the location of the current page, use document.location.
Check this:
var url = "https://portalvhdsk7w6i7k9.blob.core.windows.net:443/project/5633cc12da73d9160c4cf146.dat"
var indexofProd = url.indexOf("project/");
indexofProd = indexofProd + 8;
var indexofdotDat = url.indexOf(".dat");
var number = url.substring(indexofProd,indexofdotDat);
alert(number);

Having trouble converting user input into a graphic bar

The code seems to work fine when inputting numbers 1-9 but anything above doesn't work, what could be the issue? Here is the code:
var varkString = prompt('Enter your VARK scores - [visual|aural|read|kinesthetic]','9|3|11|10');
var subStrings = varkString.split('|');
var visual = varkString[0];
var aural = varkString[1];
var read = varkString[2];
var kinesthetic = varkString[3];
var varkBar = 30*visual
document.writeln('<img src="bar_blue.png" width='+varkBar+' height="25"/>');{
}
Edit: Solved
You are parsing first character when you are getting visual, second on aural and third on read.
I belive that you want to use subStrings
var visual = subStrings[0];
var aural = subStrings[1];
var read = subStrings[2];
when you are slpiting the string varkString the array will automatically constructed and assigned to subStrings.so use it like this:
var subStrings = varkString.split('|');
var visual = subStrings[0];
var aural = subStrings[1];
var read = subStrings[2];
var kinesthetic = subStrings[3];

pulling text from url and putting text back in url with javascript

I have tried googling this but can't find what I'm looking for. I have a url that has a number in it. I want to be able to take the number that is there and depending on what number is there then interject a name back into the url. For example:
Let's say the url is: www.example.com/video15637
Can I take that number and then do something like:
var nameVariable;
if(video15637){
nameVariable = video15637;
}
if(video26597){
nameVariable = video26597;
}
if(video18737){
nameVariable = video18737;
}
then, somehow interject the namevariable back into the url that is displayed?
You can try with:
var a = document.createElement('a');
a.href = 'http://www.example.com/video15637';
var nameVariable = a.pathname.substr(1); // video15637
You can simple use .split() or combination of .substr() and .lastIndexOf()
var url = 'www.example.com/video15637';
var video = url.split('/')[1];
alert(video)
OR
var url2 = 'http://www.example.com/video15637';
var video2 = url.substr(url.lastIndexOf('/') + 1);
alert(video2)
Combined DEMO

ExtJS/JavaScript - show image when using replace() function

I'm not sure exactly how much this question has something to do with ExtJS and how much with pure JavaScript. Anyways I have a string with comma separated value. I need to use for the GUI so I try to make it as user-friendly as I can. I made most of the things I wanted but one thing I can't accomplish yet. I want to replace all commas in the string with a proper image, which I think will fit very well on what I'm doing but for now - I try with no success.
For those familiar with ExtJS - I'm doing this for each cell in a certain column of a grid with a render function. But I think that maybe the problem must be solved with a pure JavaScript function. Here is what I have by now:
_cusomizeString: function(dates) {
if (dates != null)
{
var date = dates.replace(/,/g,"|");
var www = date.split('|');
var xxx = www.length;
for (var i = 2; i < xxx; i+=3)
{
www[i] = www[i] + '<br />';
}
var ggg = www.toString();
var hhh = ggg.replace(/,/g,'<img src =" ' + D:\dir1\dir2\dir3\dir4\dir5\img.png + ' "/>');
return hhh;
}
return dates;
}
I tried a few variations, now I don't get error but don't see an image either.
Thanks
Leron
P.S
With this change in the function:
var finalString = tempString.replace(/,/g,'<img src ="http://www.finishingtouch.co.uk/assets/images/common/calendar_icon.png"/>');
I am able to visualize this:
The main problem now is how to add the image before the first element, because now it's missing (Noticeable especially when there's only one date) and how I can make it work with local files for now? I've tried using this in my replace function:
'<img src ="file:///D:\\symapac\\src\\public\\img\\icons\\draft.png"/>'
But the console log returns this and I dont see no image:
07-06-2012<img src ="file:///D:\dir1\dir2\dir3\dir4\dir5\img.png"/>16-06-2012
Ok, I have almost final solution. Here is how it looks like:
Here is my final function:
_checkDates: function(dates) {
if (dates != null)
{
var date = dates.replace(/,/g,"|");
var arrayOfDates = date.split('|');
var stringLength = arrayOfDates.length;
for (var i = 2; i < stringLength; i+=3)
{
arrayOfDates[i] = arrayOfDates[i] + '<br />';
}
var tempString = arrayOfDates.toString();
var finalString = tempString.replace(/,/g," ,");
finalString = finalString.replace(/,/g,"<img src="+ "'" + pathToImage + "'" +"/>");
var imgSrc = "<img src="+ "'" + pathToImage + "'" +"/>";
var otuputString = imgSrc.concat(finalString);
return otuputString;
}
return dates;
}
There is that little problem that no matter now many tabs I put in var finalString = tempString.replace(/,/g," ,"); the space between the icons is always the same, no idea why. But that's the closest I get to what I've wanted.
Cheers
Leron
'<img src ="file:///D:/dir1/dir2/dir3/dir4/dir5/img.png"/>'
You have a space before your filename, also your filename isn't in quotes.

Categories