We Keep Coding

Replacing an image element's src attribute value

I'm trying to replace the image source, but only if the image corresponds to the existing class "overview-icon--downtime". Then there's another class, "overview-icon--degraded", which I want to replace it with (or simply putting an image address, which might prove easier).
To be replaced:
<div class="page__overview">
<img class="page__overview-icon overview-icon--downtime" src="downtime_large.png">
</div>
To be replaced with:
<div class="page__overview">
<img class="page__overview-icon page__overview-icon--degraded" src="degraded_large.png">
</div>
I was thinking of this, but I'm not sure I'm heading in the right direction.
document.querySelector(".page__overview-icon overview-icon--downtime").setAttribute("img", "page__overview-icon page__overview-icon--degraded");
The image loads with the page, so I'll also need to use the AJAX at the end.
Any ideas here please? Thanks a lot in advance! :3

You are heading in the right direction.
Attributes are the things inside of the tags. In this instance, "class" and "src" are attributes of the img element.
document.querySelector will select the img element, you then need to call setAttribute('class', new class value), and setAttribute('src', new src value)

RegEx for matching style tag

I have an HTML code that contain CSS code inside tag under the header tag. I want to use regex to extract all text in HTML, only pure text (between HTML tags ). I tried,
console.log(HTML_TEXT.replace(/(<([^>]+)>)/g, ""))
which replace every thing between <> by empty char, the problem is the CSS code inside STYLE tag is still there, so i want to know how to write the regular expression to remove CSS code inside tags.
How do I solve this problem?

This RegEx might help you to do so:
(\>)(.+)(<\/style>)
It creates a right boundary in a capturing group: (<\/style>)
It has a left boundary in another capturing group: (\>), which you can add additional boundaries to it, if you wish/necessary
Then, it has a no-boundary middle capturing group, (.+), where your target is located, and you can call it using $2 and replace it with an empty string, or otherwise.
I'm not so sure, did not test it, but your code might look like something similar to:
console.log(HTML_TEXT.replace(/(\>)(.+)(<\/style>)/g, '\\$1\\$3'))
This post explains how to do a string replace in JavaScript.
Edit:
Based on the comment, this RegEx might help you to filter your tags using $1:
(\<style type=\"text\/css\"\>)([\s\S]*)(\<\/style\>)

Img file name as title & alt attribute from CSS

I want to know if we can write dynamically ALT & title attribute's value same as the img file name? I think it will possible by using css content property but dont know much about it.
like <img src="file_name.jpg" alt="File Name" title="File Name">
If it is possible then also I want both the attributes having the clean & formatted values like I dont want _ underscore. may be it can be remove as well from CSS?

$('img').attr({ //change multiple attributes
title: $(this).attr('src').replace('_', '').replace('.jpg', ''), //to the src attr without _ and .jpg
alt: $(this).attr('src').replace('_', '').replace('.jpg', '')
});
You can't use content because:
CSS has a property called content. It can only be used with the pseudo
elements :after and :before. It is written like a pseudo selector
(with the colon), but it's called a pseudo element because it's not
actually selecting anything that exists on the page but adding
something new to the page.
This will put text in front or after an element, but does not change it's properties!

Using regexp to match pattern not in img tag

I want to do an online chatting application, its sending emoji ability like this:
So I use an div whose contentEditable is true as input area. And all of the message would be saved in database in this way:
"Hello, Cathy<img src="/public/face/Mazes_Mini_017.png"><img src="/public/face/Mazes_Mini_017.png">"
All of these above works well, but at that time I want to do a search ability, highlighting the key word I search, I met a problem when I want to use string.replace method to replace myKeyWord with <span class='highlight'>myKeyWord<span>, but it would match some characters in <img> tag...
eg. <img src="/public/face/Mazes_Mini_017.png">112233test112233</img>123test123
keyword is test
expected result is:
<img src="test.png">112233test112233</img>123test123
So I really want to use regExp to matched some characters not in a specify tag like <img>, I have tried a lot but no one worked...

Here is an example
You could try this: (?<!<\/)test(?![^<]*<\/img>)

Access and remove dynamically created element

I've used a for loop to create a bunch of images with unique ids. They look something like this:
<img src="image.jpg" id="110021002" />
<img src="image.jpg" id="110021003" />
<img src="image.jpg" id="110031002" />
...
Later on in the code I want to select one of the images by ID and remove it. I tried the following:
var removeId = '110021002';
var img = document.getElementById(removeId);
img.parentNode.removeChild(img);
But I get the following error:
Cannot read property 'parentNode' of null
Not quite sure what's going on here. Is it because the images were created dynamically?

Your code works perfect: http://jsbin.com/zexoweyu/3/edit for the first time you remove an element, obvisouly on the second attempt the element is not there and it will throw the given error.
On the fiddle:
Click once, works
Click again, fails because the element with that ID is no longer there.
And yes, ids can start with numbers.
**Attribute ID** Specifies a unique id for the element. Naming rules:
Must contain at least one character
Must not contain any space characters
In HTML, all values are case-insensitive

You can't have IDs that start with a number. Try prefixing them with a letter.