We Keep Coding

find and replace certain attributes using cheerio

I have a html fragment similar to this
<div class="form-row">
<input type="text" id="foo1">
</div>
<div class="form-row">
<input type="text" id="foo2">
</div>
<div class="form-row">
<input type="text" id="foo3">
</div>
and I wanted to use cheerio to change the id tag to foobar[1,2,3]
my code is
var cheerio = require("cheerio");
var $ = cheerio.load("html as above");
var inputs = $('input[id]');
Object.keys(inputs).forEach(function(key,index) {
if (key == index) {
console.log(key,inputs[key])
//#1
});
at this point (//#1), I wanted to get the value of the id attribute, and according to the docs at https://github.com/cheeriojs/cheerio I can use the .data method to get and change the attribute in the element, but
inputs[key].data("id")
gives me a "TypeError: undefined is not a function" error
I know that I'm missing something simple, but can't see the wood for the trees and would appreciate some pointers.
thanks
update #1
just when I think I've got a grip on this, it slips from my fingers ..
now, I want to move an element :
I have
<label>xyz<i class="fa fa-list"></i></label>
and I want
<label>xyz</label><i class="fa fa-list"></i>
the code - that doesn't work ;) - is this
var icons = $('label i');
icons.each(function(index,icon) {
// #2 now that I've got an element what now ?
}
I know that icons.remove() will delete the element(s) but struggling to get them added to the right place.

The problem is inputs[key]) will be a dom element reference, which will not have methods like data()
Try to set the attribute value like
var cheerio = require("cheerio");
var $ = cheerio.load('<div class="form-row">\
<input type="text" id="foo1">\
</div>\
<div class="form-row">\
<input type="text" id="foo2">\
</div>\
<div class="form-row">\
<input type="text" id="foo3">\
</div>');
var inputs = $('input[id]');
inputs.attr('id', function(i, id){
return id.replace('foo', 'foobar')
});
console.log($.html())

How to getElementsByTagName when elements are prepared for being an array in their name

I'm trying to get an array of elements with javascript or jQuery when the elements I want are a set with the same name prepared for being an array once I submit the form.
Much more understandable with the code:
<form>
<!-- ... -->
<input name='ciudades[]' id="cb_0" type='checkbox' style="display: none" checked="checked" value="ALICANTE_AER">ALICANTE_AER</input>
<input name='ciudades[]' id="cb_1" type='checkbox' style="display: none" checked="checked" value="MALAGA_AER">MALAGA_AER</input>
<input name='ciudades[]' id="cb_2" type='checkbox' style="display: none" checked="checked" value="MALLORCA_AER">MALLORCA_AER</input>
<input name='ciudades[]' id="cb_3" type='checkbox' style="display: none" checked="checked" value="VALENCIA_AER">VALENCIA_AER</input>
<!-- ... -->
</form>
I've tried to get an array with all the elements named 'ciudades[]' with these two ways unsuccesfully:
var cb_ciudades = document.getElementsByTagName('ciudades[]');
and
var cb_ciudades = document.getElementsByTagName('ciudades');
but I'm ending with an empty array in both cases. How could it be done?

getElementsByTagName works by tag name, e.g. input or div or span, not the name attribute.
If you want to get those elements by their name, you can use querySelectorAll:
var list = document.querySelectorAll('input[name="ciudades[]"]');
querySelectorAll is supported by all modern browsers, and also IE8.
Or as you've tagged your question jquery:
var $list = $('input[name="ciudades[]"]');

You need to get the elements by attribute as ciudades[] is value of name attribute. however you have used get by tag name method. You can get them using jquery:
$('[name="ciudades[]"]')
If you want the solution in javascript then refer https://stackoverflow.com/a/15342661/1719752

javascipt
var inputs = document.getElementsByTagName('input');
var myElements = [];
for(var i =0; i < inputs.length; i++){
if(inputs[i].getAttribute('name') == 'ciudades[]'){
myElements.push(inputs[i]);
}
}
jQuery
$('[name="ciudades[]"]')

Replace the text inside a div

I got this snippet of code and I would like to replace the "ARRIVAL" text which is between the top and lower level <div> element but I can't figure out a way.
I don't want to use replaceWith , html or similar methods on <div class="left booktext"> because that would replace the rest of html elements. There is an event handler attached to input class="bookfields" and I don't want to lose that. Unfortunately, there is no event delegation.
<div class="left booktext">
ARRIVAL
<div class="bookborder">
<input type="hidden" name="checkin" value="2014-03-05">
<input type="text" class="bookfields hasDatepicker" style="width:65px;" id="checkin-select" placeholder="dd/mm/yyyy">
</div>
</div>

You can use contents() along with replaceWith():
$('.left').contents().first().replaceWith("New Text");
Fiddle Demo

In pure Javascript:
var books = document.querySelectorAll('.booktext');
for (var i = 0, length = books.length; i < length; i++) {
books[i].firstChild.data = "your text";
}
Easier with jQuery though:
$('.booktext').contents().first().replaceWith("your text");
Advice
Is better put text in a span element, with all the benefits of the case.
In this way you can put your text in any order inside div, like:
<div class="left booktext">
<div class="bookborder">
<input type="hidden" name="checkin" value="2014-03-05">
<span>ARRIVAL</span>
<input type="text">
</div>
</div>
And than replace with:
$('.bookborder span').text('my new text');

In pure javascript you can access a text node like this
var bookText = document.querySelector(".booktext");
bookText.firstChild.nodeValue = "Some other text";
see it working here
http://codepen.io/sajjad26/pen/JkAms

How to replace "value" in Javascript with Regular Expression?

Suppose I have three kind of HTML coming either of them:
<input name="myName" id="myID" role="textbox" style="width: 98%;" type="text" value="SDFSF"/>
OR
<input name="myName" id="myID" role="textbox" style="width: 98%;" type="text" value='SDFSF'/>
OR
<input name="myName" id="myID" role="textbox" style="width: 98%;" type="text"/>
I don't know which of them coming. I am trying to edit them like this:
<input name="myName" id="myID" role="textbox" style="width: 98%;" type="text" value=''/>
I am using this thing:
html = html.replace(/value="(?:[^\\"]+|\\.)*"/,"value=''");
This is able to replace value="Something" to value=''. How can I extend this for other two? Is there any option for OR in Javascript?
Edit
I don't have the DOM element. So, I have to use it like this.

Parse the HTML into a DOM element and manipulate it. Then you can convert it back to HTML or whatever you want to do with it:
var container = document.createElement('div');
container.innerHTML = html;
container.firstChild.setAttribute('value', '');
html = container.innerHTML;
Note: Others mentioned to use element.value = '';. This works as long as you don't want to serialize the element back to HTML. If you did, it would still have the original value value.

Please use simply the DOM
document.getElementById("myId").value = "";
you can also refer to the previous value to check.
var el = document.getElementById("myId")
var myValue = el.value;
if (myValue === notSoGood) {
el.value = "BetterValue";
}

Trying to find selected radio button. What's wrong?

I can read out text field values, but when I try to find the selected radio button, I get nothing.
$(document).ready(function(){
$("form#create_form").submit(function() {
var title = $('#title').attr('value');
var owner = $('#owner').attr('value');
var users = $('#users').attr('value');
var groups = $('#groups').attr('value');
var begin_date = $('#begin_date').attr('value');
var end_date = $('#end_date').attr('value');
// get selected radio button
var type = '';
for (i=0; i<document.forms[0].type.length; i++) {
if (document.forms[0].type[i].checked) {
type = document.forms[0].type[i].value;
}
}
HTML:
<div class="create-new">
<form id="create_form" name="create_form" action="" method="post">
...
<input name="type" id="type" value="individuel" type="radio" /> Individuel <br/>
<input name="type" id="type" value="course" type="radio" /> Course <br/>
<button class="n" type="submit">Create</button>
</form>
What am I doing wrong?

I would suggest an alternative method to getting the selected radio button (since you are already using jQuery):
$('input:radio[name=type]:checked').val();
This solution is an example on .val().
The above solution is much more succinct, and you avoid any conflicts in the future if other forms are added (i.e you can avoid the potentially hazardous document.forms[0]).
Update
I tested your original function with the following fiddle and it works:
http://jsfiddle.net/nujh2/
The only change I made was adding a var in front of the loop variable i.