Develop Reference

Replacing a number found on multiple instances in div element with another number

As you can see, my HTML contains multiple references to '0'. I need to change these to '1'.
However, my jQuery isn't working.
jQuery(".create-new-location").click(function() {
jQuery("#header-logo").html().replace(/\[0\]/g, '['+(1)+']');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header-logo" class="header-title location-header-0 title-edit-header" data-row-id="location-header-0" title="Location name (for your reference)">
<div class="input-selection title-edit-header">
<div class="text-input">
<input class="option_textbox col-sm-12 change-width title-edit" placeholder="Location name (for your reference)" value="" type="text" name="bp_theme_options[social][map][locations][0][location_name]">
</div>
</div>
<div class="open-block pencil-edit" data-row-id="location-header-0"></div>
</div>

You have to set the html like this
jQuery(".create-new-location").click(function() {
var the_html = jQuery("#header-logo").html().replace(/\[0\]/g, '['+(1)+']');
jQuery("#header-logo").html(the_html);
});
But this is not a good practice!!
When you need to change only the attribute of an <input>, why change the whole #header-logo, right? When you re-draw html like this, you risk losing event-handlers binded to the elements you have just re-drawn.
jQuery(".create-new-location").click(function() {
var elements = jQuery("#header-logo").find('input[name]'); /*all input with name*/
elements.each(function(el){
var the_name = el.attr('name').replace(/\[0\]/g, '['+(1)+']');
el.attr('name', the_name);
});
});

Regexing the html is never a good idea.
As you can see, my HTML contains multiple references to '0'. I need to change these to '1'.
The approach you used, and even the accepted answer here, will not modify the containing div with id="header-logo" which contains several of these references. Moreover, there are significant issues with simply replacing existing dom elements with freshly regexed ones in validation cases (as in, this may break your validation).
The approach you should use is to specifically target the attributes that contain these references, and then only modify those. Here is a general approach which looks in all attributes and modifies the occurrence of [0 (0 being the value of before) into [1 (1 being the value of after) as well as modifying the occurrence of -0 (before = 0) to -1 (after =1).
This will prevent removing any existing event handlers from the elements, as well as a number of other issues associated with regexing straight html and then replacing the dom element with the that result.
$.fn.indexUpdate = function(before,after){
$("*",this).add(this).each(function(){
$(this.attributes).each(function(){
this.value = this.value.replace(new RegExp('\\b\\-'+before+'\\b','g'), '-'+after);
this.value = this.value.replace(new RegExp('\\['+before, 'g'), '['+after);
});
});
};
$("#header-logo").indexUpdate(0,1);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header-logo" class="header-title location-header-0 title-edit-header" data-row-id="location-header-0" title="Location name (for your reference)">
<div class="input-selection title-edit-header">
<div class="text-input">
<input class="option_textbox col-sm-12 change-width title-edit" placeholder="Location name (for your reference)" value="" type="text" name="bp_theme_options[social][map][locations][0][location_name]">
</div>
</div>
<div class="open-block pencil-edit" data-row-id="location-header-0"></div>
</div>

This statement jQuery("#header-logo").html().replace(/\[0\]/g, '['+(1)+']'); retrieve the html inside the element that have id as header-logo and replace every 0 inside the html string with 1 But it doesn't assign the modified string again to the element So you may want to use following code.
jQuery("#header-logo").html(jQuery("#header-logo").html().replace(/\[0\]/g, '['+(1)+']'));

Try this:It will replace all existence of '0' with '##'
$(".create-new-location").click(function() {
$("#header-logo").html().replace(/0/gi, '##')
});

querySelectorAll doesn't select select boxes with name

I have a form that has multiple select boxes and inputs with a array like name.
So I have multiple select boxes with a name personroom[]. I would like to get these using this
var personroom=document.querySelectorAll("input[name='personsroom[]']");
alert(personroom.length)
it gives me null ("0"). But with the same way I can select all input (text) fields. Strange. Can anyone help me?

The issue seemed to have been related to the exact target of the selector.
the original selector "input[name='personsroom[]']" didn't work but according to OP comments dropping the input worked "[name='personsroom[]']"
A note on escaping [] characters. In this specific case, that was not the issue as the query string used inline single quotes ► "[name='personsroom[]']"
Using this "input[name=personsroom[]]" , with no single quotes, you need to escape the [] like this "input[name=personsroom\\[\\]]"
// The below will fail with "Uncaught SyntaxError..." during execution
//var personroom = document.querySelectorAll("[name=personsroom[]]");
//The below works as we are escaping the special characters
var personroom = document.querySelectorAll("[name=personsroom\\[\\]]");
console.log("1.) personroom.length", personroom.length);
//Also, when using inline quotes, you do not need to escape any characters
var personroom = document.querySelectorAll("[name='personsroom[]']");
console.log("2.) personroom.length", personroom.length);
<input type='textbox' name='personsroom[]' />
<input type='textbox' name='personsroom[]' />
<input type='textbox' name='personsroom[]' />
<input type='textbox' name='personsroom[]' />

If you are using select boxes, then you are using <select></select>, correct? Change input to select in your query:
var personroom=document.querySelectorAll("select[name='personsroom[]']");
alert(personroom.length)

Regex to strip html tag with certain attribute

I have some invalidly-nested HTML like:
<form class="form1" method="get">
<div>
<input name="field1">
</form>
<form class="form2" method="get">
<input name="field1">
</form>
</div>
Yeah, it's a mess, don't ask. The invalid nesting is causing problems somewhere else. jQuery I think is expecting a closing </div>, and only finding it at the last one. It's then treating the second <form> tag as invalid, and also discarding the closing </form> immediately above it, and assuming everything between lines 1 and 9 are one form.
If I output these to the console:
$('.form1).html() - all of line 1 - 9
$('.form2).html() - undefined
So what I'm trying to do is treat the whole thing as a string, and use regex to strip out form2. I'm expecting a regex something like:
formText.replace(/(<form\b[^>]*>)[^<>]*(<\/form>)/gi, "");
but I'm not sure how to reference the specific form with class=form2.
There's also a problem with it being a multi-line string.
Update: added more detail, outlining why jQuery's remove() method isn't working. jQuery only thinks there's one form unfortunately.

Don't use regex to parse HTML. Since you're using jQuery, just use .remove():
$(function() {
$(".form2").remove();
});
JSFiddle

I ended up using:
formText = formText.replace(/(<form\b[^>]*form2+.*>[\s\S]+<\/form>)/gi, "");
The [\s\S] matches all characters including \n and \r to cover the newlines.
I could probably have made the part of the regex dealing with the class name more specific so I knew it was the class and not some other random form with a similar, but in practice it didn't matter (there was only one instance of the 2nd form, with a very specific class name).

Why does PHP only parse DOM elements using 'name' identifiers, and not 'id'?

There seems to be a lot of waste in having to duplicate the same string for both the id and name of an element within a form:
<input id="foo" /> <!-- JS/CSS accept this -->
<input name="foo" /> <!-- Only PHP accepts this -->
<input id="foo" name="foo" /> <!-- Everyone's happy -->
Why does PHP not use id tags?

Why does PHP not use id tags?
That's not PHP, that's HTML. PHP has nothing to do with the HTML spec.
HTML does use id attributes, but it uses them for a different purpose than name attributes.
HTML form elements build requests (POST or GET generally) from their child value-carrying elements (input, select, textarea, etc.). The name attribute is used as the key, and the value (or selected value, etc.) is used as the value.
This creates the key/value pairs for the data in the request.
There seems to be a lot of waste in having to duplicate the same string for both the id and name of an element within a form
You don't have to duplicate it. You may personally choose to duplicate it. But that's your choice. There's no rule in any specs/standards/conventions/etc. indicating that you must or even should do that.
<input id="foo" /> <!-- JS/CSS accept this -->
<!--- incorrect. JS/CSS can also target name attributes if necessary. -->
<input name="foo" /> <!-- Only PHP accepts this -->
<!--- incorrect. This isn't PHP, this is HTML. PHP isn't involved here at all. -->
<input id="foo" name="foo" /> <!-- Everyone's happy -->
<!--- if that's the markup you choose to define, sure. -->

Why does PHP not use id tags?
Because that is the standard set for submitting forms to specified serverside. I would say that IDs are most likely to be used with js/css while you need name to serialize your form elements.

Id attribute is used for DOM manipulating.
http://www.w3schools.com/tags/att_global_id.asp
When sending forms name attribute is used either.
http://www.w3schools.com/tags/att_input_name.asp
These are different purposes.
You can use name attributes in JS also, but array of elements will be returned:
// plain JS
document.getElementsByName("foo");
// jQuery example
$('[name="foo"]')

because in web need 3 type identifier for each unique use for example
1) class : its use for designing and also select multiple tag in dom (jquery)
2) id : used to access some specific element in dom and also design for one field
3) name : used for passing single and multiple data and array
AND thing if you can pass value by id then how can you send checkbox value and multiple select tag values ???

How to find the input element in my html markup

I am trying to use regular expression to find if the variable contains an input field.
My html in my variable could be something like this.
<span>test here</span>
or
<span><input type="text"></span>
My codes are like
//$(this) is be my variable
if($(this).html().match("/<input type='text'>/")){
console.log('match found')
}
It doesn't seem to be able to find the match. Can anyone help me about it? thanks a lot!

How about
if ($(this).find('input[type="text"]').length) {
console.log('match found');
}
If this is a string of HTML text (as indicated), you can still use the same code, for example
$('<span>test here</span>').find('input').length // equals 0
$('<span><input tyep="text"></span>').find('input').length // equals 1

I'm not precisely sure what you are trying to do, but I beleive this will get the same result as the above $(this).find('input[type="text"]')
If you are looking for a regex /input\s+[^>]*type\s*=\s*['"]text['"]/ should do the trick.

If you're after a regular expression for the input tag, this could be a basic one:
<input .*type=['"]text['"].*/>
this will match any input tag with type="text" (double or single quotes) and any attributes in between.
If the input elements are already on the page, I would suggest jQuery:
if($('input[type=text]').length > 0){
console.log('match found');
}
Please note the input element does not require a closing tag
<input type="text"></input> but rather <input type="text" />