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 + '"]');

How to change colour of text when using document.getElementById("id").innerHTML

I am trying to change the text of a span to something else when a particular event occurs. I am doing this as :
document.getElementById("usernameError").innerHTML = "**Message";
I want to display the same in a different colour. Any idea on how to do that?
Much appreciated!

You could always just put the message in a span and put a style attribute on it. This should do it:
document.getElementById("usernameError").innerHTML = "<span style='color: red;'>**Message</span>";

As you can find in the Mozilla Developer Network, you can use HTMLElement.style property to change any style on the element.
So you can do something like this to colour it in red:
document.getElementById("usernameError").style.color = '#d00'

A more future proof and reusable solution would probably be to add a class to either the current element or the span element, depending on your requirements:
document.getElementById("usernameError").className = "color-red";
Or working off Erics solution:
document.getElementById("usernameError").innerHTML = "<span class='color-red'>**Message</span>";
Then in your CSS:
.color-red{
color: #F00;
}
You could obviously also add diff colours and attribute in a much more maintainable way like this.
NOTE: className Returns A String, representing the class, or a space-separated list of classes, of an element.

How to find position of a word in a div (y coordinate)

I have a lot of text within a DIV. I would like to be able to search it on a string using perhaps a PHP regex then find the y position of that text that is searched on so I can place an image next to it.
I believe this would be the best way of doing it, I am unsure. However, I can't figure out how to determine how many pixels from the top of the screen that line is. Any recommendations?

#user1524441 not sure if this what you mean but from what I understand you want to add an image next to a specific search term, if this is the case you can use the following approach assuming you are using jquery:
var search = "Robin";
var text = $('.content').text();
$('.content').html(text.replace(search,'<span class="search-term" style="font-weight:bold;">' + search + '</span>'));
$('.search-term').before('<img src="url/goes/here" alt="" title=""/>');
here is a jsfiddle displaying how it works http://jsfiddle.net/6YsfB/

you can use substring and indexOf
var serch = "Robin"
var text = "hi my name is Robin, what you so talk? I'm god";
document.write(text.substring(text.indexOf(serch),text.indexOf(serch)+(serch).length));
http://jsfiddle.net/5bejQ/1/

If you're doing the search on the server, you could output the found text wrapped in <span> tags with a certain CSS class:
Here is some text with the <span class = "highlighted">text of interest</span> highlighted.
Then you could use the CSS "content" property (http://css-tricks.com/css-content/) in conjunction with the :before or :after pseudo-classes to show an image before or after the highlighted text.

Javascript/jquery replace text removes formatting of div

http://jsfiddle.net/2EvGF/
JS
$('.msgln').each(function() {
var text = $(this).text();
$(this).text(text.replace('Admin', 'sys-admin'));
});
HTML
<div class='msgln'><b>Admin</b>:<i> Chat cleared</i><br></div>
Replacing the class '.msgln' removes the formatting (bold, italics, etc.) How can I resolve this?

It might be happening because the css rules for bold, italcs etc might be defined for the class msgln, so once the class is removed the associated css rules also will be removed.
A solution is to add another class where the same css rules are defined

As it said here, http://api.jquery.com/text/#text2, it replace whole inner html with the given text.
You need to get down to the element that has the text you want to replace. In your case, it would be .msgln b
$('.msgln b').each(function() {
var text = $(this).text();
$(this).text(text.replace('Admin', 'sys-admin'));
});

I agree with sincebasic's solution. Here's my version with little update as you can have tag presented in other parts of the the HTML with the class "msgln". How about the following?
HTML
<div class='msgln'><b><span class="username">Admin</span></b>:<i> Chat cleared</i><br></div>
JS
$('.msgln span.username').each(function() {
var text = $(this).text();
$(this).text(text.replace('Admin', 'sys-admin'));
});

SImple image replace using Javascript/html

Couldn't find a punctual answer for this simple task and your help is highly appreciated
We have an image we want to switch based on user's color selection.
Tried several methods, none worked.
This is the idea:

$('#YourButton').click(function() {
var oldSrc = 'images/Image1.png';
var newSrc = 'images/Image2.png';
$('img[src="' + oldSrc + '"]').attr('src', newSrc);
});
Just change the image source with javascript by clicking your button with another color
Note: it´s jquery so you have to include the js file..

Just bind a click listener to your button and change the src attribute of your image.
$('#colorButton').click( function() { //choose a new color
$('#imageIcon').attr('src', 'path/to/new/image.png'); //change the img's source
});
EDIT (response to questions):
If you want this code to apply to all of your buttons, give each of your buttons a similar class instead of an ID:
<div class="colorButton"></div>
Then you can use the following selector to apply the above click listener to all of these divs:
$('.colorButton')
Naturally, you want to change your image as simply as possible. You could map all of your colors to their corresponding image file, but as far as design goes this might get messy and unwieldy. I would create a directory that stores all of your image files (for example, /your/color/swatches) and give each of them a name consistent with their color, like 'ff0000.png' for red, '0000ff.png' for blue, etc.
Why would we do this? So that we can switch your image based on the background-color attribute of your buttons. Let's say that you have the following buttons:
<div class="colorButton" style="background-color: '#ff0000'"></div>
<div class="colorButton" style="background-color: '#0000ff'"></div>
You can use the same click listener, but it will have to be modified a bit since we are mapping the background color to an image:
$('.colorButton').click( function() {
var color = $(this).css('backgroundColor');
//(You'll need to modify your color string here)
$('#imageIcon').attr('src', 'your/color/swatches/' + color + '.png');
});
BUT this won't work yet. Since most browsers return "rgb(xx, yy, zz)" from .css('backgroundColor'), you need to convert that string into hex. This post on SO gives a more or less effective way to do so, but you'll need to modify it to fit your model where I have indicated.