Variables inside JQuery selectors - javascript

This works...
var start = $('.nodes:first>span>div');
var foo1 = $(".nodes:first>span>div>div>div>div>span>div");
var foo2 = $(".nodes:first>span>div>div>div>div>span>div>div>div>div>span>div");
var foo3 = $(".nodes:first>span>div>div>div>div>span>div>div>div>div>span>div>div>div>div>span>div");
var foo4 = etc,etc...
Trying to consolidate to something like this...
var start = $('.nodes:first>span>div');
var separator = ">div>div>div>span>div";
var foo1 = $("start + 1*separator");
var foo2 = $("start + 2*separator");
var foo3 = $("start + 3*separator");
var foo4 = etc,etc...
Have been muddling for hours, but the syntax for this escapes me! Any pointers? Thanks!

The find() method seems like it should do it.
var $start = $('.nodes:first>span>div');
var separator = ">div>div>div>span>div";
var $foo1 = $start.find(separator);
var $foo2 = $foo1.find(separator); // etc...
If possible, I'd try and simplify your HTML so you don't need so many selectors though. This kind of code seems like it's going to be a nightmare to understand if you need to come back to it to fix something later.

Selectors are just strings so you just add strings to together and use them as a selector.
var start = '.nodes:first>span>div';
var separator = ">div>div>div>span>div";
var foo1 = $(start + separator);
var foo2 = $(start + separator + separator);
var foo3 = $(start + separator + separator + separator);
Though, if we understood what you were trying to accomplish, there is probably a much nicer way of doing it using less complication. For example, you should probably be using classes on the different types of divs and spans and then target specific classes without regard for how many intervening layers of divs there are. This makes your code much, much less brittle and much less tied to the exact HTML implementation (it still has some dependencies, but not near as many).
FYI, as far as I know, you can't multiply strings to get multiple copies of them so 2*str doesn't get you a string with two consecutive copies of str in it.

Related

How to replace 'special' characters in a string of code with an expanded piece of that same code?

I'm creating a chrome extension that basically finds a string of text such as this (note the different numbers):
id%22%3A99986%2C%22name%22%3A%22null%22%7D%2C%7B%22id%22%3A1002938%2C%22name%22%3A%22null%22%7D%2C%7B%22
and then usese javascript to swap that text above with this:
id%22%3A77764%2C%22name%22%3A%22null%22%7D%2C%7B%22id%22%3A77984%2C%22name%22%3A%22null%22%7D%2C%7B%22id%22%3A87746%2C%22name%22%3A%22null%22%7D%2C%7B%22
I can't manage to make this work whatsoever. All I'm able to do is swap out the ID numbers and replace individual parts of the code whereas I want to improve it by replacing with larger pieces of code. Can someone help me get past this because I'm confused.
Here is the code that works for me:
document.body.innerHTML = document.body.innerHTML.replace(/99986/g, '77764');
What I'm trying to do is to replace one piece of code with two pieces of code (obviously wrong but it's clear what I'm trying to do):
document.body.innerHTML = document.body.innerHTML.replace(/id%22%3A99986%2C%22name%22%3A%22null%22%7D%2C%7B%22/g, 'id%22%3A77764%2C%22name%22%3A%22null%22%7D%2C%7B%22id%22%3A77984%2C%22name%22%3A%22null%22%7D%2C%7B%22');
Update 1:
Thank you Emeeus, your code worked great! Unfortunately I made an error in my example so I had to fix it up a bit from my end. This is the new code using your layout:
var strA =
"%7Bid%22%3A1001%2C%22name%22%3A%22The+Antique+Store%22%7D%2C%7B%22id%22%3A1010%2C%22name%22%3A%22Clothes%22%7D%2C%7B%22id%22%3A1349%2C%22name%22%3A%22Old+Store%22%7D";
var strB = "%7Bid%22%3A1001%2C%22name%22%3A%22The+Modern+Store%22%7D%2C%7B%22id%22%3A1010%2C%22name%22%3A%22Clothes%22%7D%2C%7B%22id%22%3A1349%2C%22name%22%3A%22New+Store%22%7D";
var arrA = JSON.parse(decodeURIComponent(',{""' + strA + '",:""}'));
var arrB = JSON.parse(decodeURIComponent(',{""' + strB + '",:""}'));
console.log(arrA)
console.log(arrB)
var res = Object.assign(arrA, arrB);
console.log(encodeURIComponent(JSON.stringify(res)))
But I'm met with this error "Error: Unexpected token , in JSON at position 0". Any ideas?
I think you should check if the typeof string you are trying to replace is string. I tested, check if that solves your problem.
See screenshot:
Your strings are parts of a JSON URI-encoded, so I suggest first to decode the strings an then parse them using JSON.parse, then you could work with objects literals, which is easier most of times, here an example:
var strA = "id%22%3A99986%2C%22name%22%3A%22null%22%7D%2C%7B%22id%22%3A1002938%2C%22name%22%3A%22null%22%7D%2C%7B%22";
var strB = "id%22%3A77764%2C%22name%22%3A%22null%22%7D%2C%7B%22id%22%3A77984%2C%22name%22%3A%22null%22%7D%2C%7B%22id%22%3A87746%2C%22name%22%3A%22null%22%7D%2C%7B%22";
var arrA = JSON.parse(decodeURIComponent('[{"' + strA + '":""}]'));
var arrB = JSON.parse(decodeURIComponent('[{"' + strB + '":""}]'));
console.log(arrA)
console.log(arrB)
var res = Object.assign(arrA, arrB);//<-- example
console.log(encodeURIComponent(JSON.stringify(res)))//<-- you could encode the result again

window["object.something"] not working for objects javascript

Hi I just can't figure this one out.
I need to use the window["evaluate string into js object"] because I am converting a web Application into a ChromeOS Chrome app and they do not let you use eval() to do their content security policy.
My problem is that for basic varibles it is fine, example:
var a = "foo";
var b = window["a"];
This will put "foo" into b no problem. But as soon as I have an object (both global or local) it doesn't work, so if 'a' was an object the code would like something like this:
a.test = "foo";
var b = window["a.test"];
That will not work.
Is there a reason for this? I can't seem to find much info on window[] in general so wondering if anyway has any insight or at least can point me in the right direction to look.
Thanks
window[] doesn't work on namespaced functions, so if you try to evaluate window['a.test'] it would fail. A proper alternative is to use window['a']['test']. In case you're indefinite of number namespaced objects you're going to use, you can create a simple function that would split the string from . and create a window object for each part. Example :
var str = 'namespace.service.function';
var parts = str.split(".");
for (var i = 0, len = parts.length, obj = window; i < len; ++i) {
obj = obj[parts[i]];
}
console.log(obj);

Is there an easier method to concatenate variables using JavaScript?

I'm currently doing this:
var 1 = "http://www";
var 2 = ".google.";
var 3 = "com/";
then concatenating them together like this
var link = 1+2+3;
Is there an easier and more proficient way of doing this?
I don't know what would be much easier than simple concatenation like you show, but you could put them in an Array and join it together.
(I fixed your variable names to make them valid.)
var first = "http://www";
var second = ".google.";
var third = "com/";
var link = [first, second, third].join("");
Or you could use the .concat() method.
var link = first.concat(second, third);
But both of these are longer than your original so I don't know if that's what you want.

Quotes in Javascript

I have been trying for hours to fix this code, I can't see what's wrong:
document.getElementById('detail'+num).innerHTML='<a class="dobpicker" href="javascript:NewCal('+s_d+','+ddmmyy+')">'
The problem is in href="javascript ..."
s_d is a javascript variable defined as
var num = 2;
var s_d = "sname"+num;
var ddmmyy = "ddmmyy";
Basically I need to call a javascript function with different parameter each time.
Use a backslash like \'.
document.getElementById('detail'+num).innerHTML=
'<a class="dobpicker" href="javascript:NewCal(\''+s_d+'\',\''+ddmmyy+'\')">'
Since this is the value of a href attribute, HTML encode them:
document.getElementById('detail'+num).innerHTML='<a class="dobpicker" href="javascript:NewCal("'+s_d+'","'+ddmmyy+'")">'
Or better yet don't use the javascript: protocol:
[0,1,2,3,4,5].forEach(function(num) {
var s_r = "sname"+num;
var ddmmyy = "ddmmyy";
var aEl = document.createElement("a");
aEl.className = "dobpicker";
aEl.onclick = function() {
NewCal(s_d, ddmmyy);
}
document.getElementById('detail'+num).appendChild(aEl);
});
Your .innerHTML setting is using s_d, but your variable declaration has s_r.
EDIT: That was the first thing that jumped out at me. Having looked a bit closer and realised the values are strings, I think fixing the variable name together with adding some escaped quotation marks as in Daniel A. White's answer will do the trick.

Parsing every element of an array as an integer

I have a string which I need to split into an array and then perform mathematical functions on each element of the array.
Currently I am doing something like this. (Actually, I am doing nothing like this, but this is a very simple example to explain my question!
var stringBits = theString.split('/');
var result = parseInt(stringBits[0]) + parseInt(stringBits[3]) / parseInt(stringBits[1]);
What I would like to know is if there is a way I can convert every element of an array into a certain type that would stop me from having to explicitly parse it each time.
An easier method is to map to the Number object
result= stringBits.map(Number);
javascript 1.6. has map() ( https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Objects/Array/Map ), so you can do something like
intArray = someArray.map(function(e) { return parseInt(e) })
You can just loop through it:
for(var i = 0; i < stringBits.length; i++) {
stringBits[i] = parseInt(stringBits[i]);
}
["1","2"].map(Number)
result: [1,2]
If you add a plus (+) sign in front of your strings they should be converted to numeric.
For example, this will print 3:
var x = "1";
var y = "2";
alert((+x) + (+y));
But I am not sure if this is portable to all browsers.
Your code will become:
var stringBits = theString.split('/');
var result = (+stringBits[0]) + (+stringBits[3]) / (+stringBits[1]);
But this is just a hack, so use with care.
I think the parseInt states better what you are trying to do, but you should delegate this responsibility to another method that returns the final data that you need to process. Convert and then process, don’t convert while processing. Your code will be easier to read.

Categories

Resources