We Keep Coding

Fetching “id” from first 5 tags and separate them with comma in output using pure javascript

I am working on one of script where I need to pull the value available in id on tag I need to use pure Javascript to get this done. I have similar jQuery code available but I am not able to successfully complete Javascript one.
My jquery Code
var arr1st3 = $('article:lt(3)').map(function() {
return this.id.replace(/[^\d]/g, '');
}).get();
console.log( arr1st3 );
Here is the test url
http://jsfiddle.net/0mvjbkhs/5/
I am trying to have Javascript function that will return the values in output like ['123456', '7896669', '1147777']
Any help will be really appreciated

Pure javascript version would be:
var arr2st3 = [].map.call(document.querySelectorAll('article:nth-child(-n+4)'), function(el) {
return el.id.replace(/[^\d]/g, '');
});
Quite similar. You just use native Array.prototype.map and article:nth-child(-n+4) CSS selector to select elements.
Demo: http://jsfiddle.net/0mvjbkhs/6/

Values of all textboxes on a page - without knowing the ID?

I am developing a Chrome Extension that, when the user leaves the page, saves all the text from the textboxes on that page and outputs it to a file.
If I knew the IDs of the textboxes on the page, then it wouldn't be a problem, but the issue is that I need the extension to get the values of all of the textboxes on the page without knowing the IDs, as it will be a different website each time the extension is used.
Also, how would the information be collected? In a string? It would be nice to go down the page and add each textbox to a file, one by one, instead of one huge string.
I've never used jQuery or understood it, and there's probably a solution in it staring me in the face. If anyone suggests using it, please could you explain it a little bit?
Thanks in advance. I would post my code, but I don't know where to start - ergo I don't have any.

you could store it in array using $.each, as :
var valsArr = [];
$("input[type=text]").each(function() {
valsArr.push( $(this).val() );
});
or create object with name as key and value as its value, like:
var valsObj = {};
$("input[type=text]").each(function() {
valsObj[this.name] = $(this).val();
});

You can do it like this:
function onClick(){
var areas = document.getElementsByTagName("textarea");
for(var i = 0; i < areas.length; i++){
alert(areas[i].value);
}
}
<textarea></textarea>
<textarea></textarea>
<button onclick="onClick()">Gather information</button>
Also see this regarding your "save to a file" question Using HTML5/Javascript to generate and save a file

Use the selector and apply it in an each cycle.
$(":text").each(function(){
alert($(this).val());
});

Make a for loop
for(i=0; i < $("input[type='text']").length; i++){
$("input[type='text']").index(i).value();
}

You can use .map() : It returns an array.
var arr = $(":text").map(function() {
return this.value
}).get(); //add join(',') after get() to get a simple comma separated list.
Instead of input[type="text"] you could also use :text pseudo selector.
Demo

jQuery how to insert <br/> tag after every Semicolon

I am dumping some CSS into a div and I am looking to format it so it is more legible. Basically what I want to do is insert a break tag after every semicolon. I have searched around for a while but can't seem to find something that quite fits what I am trying to do.
I have something like this...
HTML
<div class='test'>
color:red;background-color:black;
</div>​
jQuery
var test = $('.test').text();
var result = test.match(/;/g);
alert(result);​
And I have tried..
var test = $('.test').text();
var result = test.match(/;/g);
result.each(function(){
$('<br/>').insertAfter(';');
});
alert(result);​
Also I have started a fiddle here.. Which basically just returns the matched character...
http://jsfiddle.net/krishollenbeck/zW3mj/9/
That is the only part I have been able to get to work so far.
I feel like I am sort of heading down the right path with this but I know it isn't right because it errors out. I am thinking there is a way to insert a break tag after each matched element, but I am not really sure how to get there. Any help is much appreciated. Thanks...

try it like this
var test = $('.test').text();
var result = test.replace(/\;/g,';<br/>');
$('.test').html(result);​
http://jsfiddle.net/Sg5BB/

You can use a normal javascript .replace() method this way:
​$(document)​.ready(function(){
$(".test").html($(".test").html().replace(/;/g, ";<br />"));
});​
Fiddle: http://jsfiddle.net/SPBTp/4/

Use This CODE
var test = $('.test').text();
var result = test.split(';').join(';<br />')
http://jsfiddle.net/FmBpF/

You can't use jQuery selectors on text, it only works on elements.
Get the text, just replace each ; with ;<br/>, and put it back.
$('.test').html($('.test').text().replace(/;/g, ';<br/>'));

Try something like this :
var test = $('.test').text();
var result = test.replace(/;/g,";");
$('.test').html(result);
​
That should work if you stick it into your jfiddle.

Jquery append element and then alter css?

I'm attempting to create a div tag and then alter it via css, but for some reason its not working here's my code:
$('#draw').click(function(e){
var divToAdd = "<div id='box' style='display:block;background-color:red;width:100px;height:100px'></div>";
$("#area").append(divToAdd);
});
$('#left').click(function(e){
//var leftNow = document.getElementById("box").left + 1;
alert(document.getElementById("box").left);
$("#box").css('left',leftNow);
});
$('#right').click(function(e){
var leftNow = document.getElementById("box").left - 1;
$("#box").css("left","90");
});
So for some reason the value of document.getElementById("box").left is undefined. I've been trying to figure this out for a while, i've probably got something wrong in my syntax perhaps? Any help would be appreciated, thanks alot! Thank you Nick Craver.

You would need .style.left, or $("#box").css('left'); in this case.
But...there's an easier way, like this:
$("#box").css("left","-=1");
You can just make it relative this way, same for +=, keep it simple :)

Here I have two suggestions:
(1)Use jQuery object instead of object itself
var divToAdd = $("<div id='box' style='display:block;background-color:red;width:100px;height:100px'></div>");
Actually the expression above is not so good either, to make it more 'jQuery":
var divToAdd = $('<div></div>').css('background-color','red').css....
(2) Keep using jQuery if you involved it
$('#box').css('left') instead of document.getElemengById(...)

find and replace strings in jquery

$('img').click(function(){
var add_to_list = $(this);
// database query for element
});
Currently add_to_list is getting the value 'images/image.jpg'. I want to replace the 'image/' to nothing so I only get the name of the picture (with or without the extension). How can I do this? I couldn't find anything. Also please provide me with further reading on string manipulation please.

Have you tried javascript replace function ?
You should modify your code to something like this:
$('img').click(function(){
var add_to_list = $(this).attr('src').replace('images/', '');
// database query for element
});

use
add_to_list.substring(7);
This will get you the string after the 7th character. If there might be longer paths, you can split() into an array and get the last part of the path using pop().
add_to_list.split("/").pop();
substring
split
pop
This tutorial explains many of the string manipulation methods seen in the answers here.

$('img').click(function(){
var add_to_list = $(this).attr('src').replace('image/', '');
// database query for element
});

var pieces = add_to_list.split('/');
var filename = pieces[pieces.length-1];