We Keep Coding

Filter by text input, how can I add RegEx? - Vanilla JS

I'm using Mixitup.js with vanilla Javascript. Here's a working JSFiddle.
When you type in "blue", "green", or "pink" it only shows elements with that class name.
What I want is to filter the results with ReGex, for example by using: new RegExp('^|\\s','gi'). However, I have no idea how to write this properly, nor implement it into the code.
Right now, when you type in "reen", it will still show results for "green". I don't want this. I only want results that match from the beginning of the word (hence ^|).
I've kept the comments in the script from the dev's demo, hopefully that helps. Full demo is here
Thanks for any help!

As I understand, you are using an attribute based selector to select elements where class begins with particular text. But in your example the elements have two classes "mix" and the color name
class ="mix green"
Simply using [class^=color class name] will not work.
Try replacing
mixer.filter('[class*="' + searchValue + '"]');
with
mixer.filter('[class^="mix ' + searchValue + '"]');

jquery's version of ".innerHTML +=" for an array html insertion

I have read through some questions pertaining specifically to innerHTML= vs .html(). But yet have crossed anything to add into the variable like innerHTML+= to the html(). Is there a jquery event that can add more than just one html string? Or shall I rely on innerHTML+= for now?
The coding that best describes the current issue:
var pushy = ['blah', 'blaH', 'blaah'];
for(i=0;i<pushy.length;i++){
document.getElementById("demo").innerHTML +=
"<div>Im one heck of a div and more!</div>" + pushy[i];}
vs
$("#demo").html("<div>Im one heck of a div and more!</div>" + pushy[i]);
//where it will return the last array value and not the first value
Although the first is the go to and failsafe. But wanted to see the exact equivalent than just pop the last value of the array. Here is my innerHTML+= vs .html() for example. The question is not pertaining to the innerHTML = but rather the += thereof.

You are probably looking for .append()
$('element').append('SOME HTML');
You example (updated)
https://jsfiddle.net/4pqegj5f/9/

are you looking for
$("#demo").append("<div>Im one heck of a div and more!</div>" + pushy[i]);

Using .append should get you the desired result. See below:
var pushy = ['blah', 'blaH', 'blaah'];
for(i=0;i<pushy.length;i++){
$("#demo").append("<div>Im one heck of a div and more!</div>" + pushy[i]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="demo"></div>

setting color of a link in javascript

I want to set the color of "val" in the link in below code.
var link = $('' + val + '<br><br>');//this is the link
link.style.color="red";//this is how iam trying to set the color of "val"
SO HOW TO EXACTLY DO IT.

You can do this:
link.css({ color: 'red' });
But the correct and nice way would be:
$(".parent_element").prepend(''+val+'<br><br>');
$(".parent_element > a:first").css({ color: 'red' });

Try this:
$(link[0]).css({ color: 'red'});
The reason for this is that link is not an <a> element - it's a set of elements: <a>, <br> and another <br>.
Another approach would be:
link.css({ color: 'red' });
but this will set this CSS to not only <a>, but both <br>'s as well (not a big deal though).

If you are using jQuery(which it does seem like) go ahead with this,
jQuery
link.css("color","red");
Otherwise,
JavaScript
link[0].style.color = "red";
What you did doesn't work because link is an array. Before applying a style to it, you have to first select the first element by link[0] and then operate on it.

You could use link.style.color="red" if link was an HTMLElementNode, but it isn't. It might be a jQuery object, but if you are using an older version of the library then it will return undefined.
First you need to fix your jQuery call. You can't create multiple elements at the top level. (You can skip this bit if you are using a sufficiently new version of jQuery).
Since there is no good reason to use a double <br> (it shouts "Use CSS to add a margin instead"), I've taken them out:
var link = $('' + val + '');
Now you have a jQuery object so you can either use the jQuery method of setting CSS:
link.css("color", "red");
or get the HTMLElementNode from the jQuery object and use that:
link.get(0).style.color="red";

link.css("color", "red")
However, I think it would be better to create a css class for that and set up the color there. In Javascript/jQuery I would just add the class to the tag when needed. It is more elegant.

addClass and class to be added is part name and part variable

Working with the YUI library and I have the following:
var levelnumber = 3;
I want to add a class to a div so that it says ".level3" , so the class to be added should be the word "level" plus the value of the variable.
Something like this but Im not sure on the syntax:
addClass("level"+[levelnumber]);
I have tried quite a few combinations of single and double quotation marks but cant get it to work.
Thanks!
EDIT:
Sorry fellas!
I asked the wrong question.
I have that part sorted actually, my problem is not with adding the class, it is with selecting a class!
I want to select .group .level3
var level = 3;
Y.all(".group" '.level'+[levelnumber])
That is what I have now but don't know where all the quoatation marks should go.
Thanks!!

Just remove the square brackets. As long as one of the variables is a string, it will concatenate them together. Here's a good article on strings in JavaScript.
addClass('level'+ levelnumber);

check this out
<div id="foo" class="bar">foo</div>
<script type="text/javascript">
var addClass = function(level) {
YAHOO.util.Dom.addClass('foo',"level"+ level );
};
addClass(3);
</script>

Jquery detect id/class by overlapping

I've searched a lot for this on google, but without luck...
Basically I need some js, that can find the id/class of the element, that I'm hovering (So I can use "this"-property).
Because I have a lot of divs (Some have to be auto generated, with random names [Or maybe not, if I can use the "this"-property]) on my page, and I don't want to type in all there names (Such as I have to do in _hittest, with just gives me a true/false value)
Hope you guys can help me :D
I've really search for this, for a loooongtime
*EDIT:
Not a mouse hover, that I'm looking for, but when hover a div with another div

You could do this, although it's bad practice to select all the divs:
$('div').mouseover(function(){
console.log(this);
});

Put in a convenient textarea to copy from:
<textarea id="A"></textarea>
JS:
$('div').mouseover(function() {
$('#A').html($('#A').html() + "\nID: " + $(this).attr('id') + " CLS:" + $(this).attr('class') + " Name:" + $(this).attr('name') )
})

Something like this? It will look for all the elements on the page which have id or name attribute and attach a hover event handler.
$("*[id], *[name]").hover(function(){
alert(this.id || this.name);
});

Just did some calculating with offset