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" />
Related
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)
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).
I wondered whether it is allowed to store angle brackets inside a html 5 data attribute. In my example I need to store email addresses inside this attribute. This looks like:
<input class="email" data-email="Name <a#z.com>">
<input class="email" data-email="Name <b#z.com>">
There was no problem in the browser until I tried to find the element with a certain email address with jQuery.
$('.email[data-email="Name <a#z.com>"]')
This didn't work. So I asked myself whether it is allowed and if so how to select it with jQuery. If not - is there another way how to solve this problem?
You need to do
$('.email[data-email*="a#z.com"]')
Here * is a wildcard saying that select element whose atttibute contains a#z.com
I don't know what is wrong with jQuery, but pure JS seems to be working:
document.querySelector('.email[data-email="Name <a#z.com>"]');
If you are not matching the full value of the field, you can't use the = operator; *= is substring comparison:
$('.email[data-email*="<a#z.com>"]').val("This one is a#z.com");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="email" data-email="Name <a#z.com>">
<input class="email" data-email="Name <b#z.com>">
need some help! am trying to get the value of the below input id "j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" and have tried jquery and javascript such as: document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:3:j_id63") but keep getting a null result. ID can't be changed either, any help appreciated
<td class="sf42_cell_bottom_light"><span id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61"><input id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" maxlength="200" name="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" size="20" type="text" value="717474417"></span></td>
Use this:
$("[id='j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61']")
By the way, since you are apperently using JSF, this is a good practice to set id to each component to avoid such horrible ids (who can changes if you add/remove components).
See more information in this thread:
Handling colon in element ID with jQuery
Do you have any control of the element? Can you add a class to it?
var val= document.getElementsByClassName("TheClassName");
Or you can get the TD with class sf42_cell_bottom_light (if it is unique) then get its INPUT elements by:
var theTd= document.getElementsByClassName("sf42_cell_bottom_light");
var val = theTD.getElementsByTagName("INPUT");
I need to see more of the HTML to give you an better answer.
You may need to escape colon in your id .So
try this
function RemoveInvalidCharacter(myid) {
return '#' + myid.replace(/(:|\.|\[|\])/g, "\\$1");
}
And call like this
$(RemoveInvalidCharacter('j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61'));
Have a look at How do I select an element by an ID that has characters used in CSS notation
I have tested this code:
<td class="sf42_cell_bottom_light">
<span id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61">
<input id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" maxlength="200" name="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" size="20" type="text" value="717474417">
</span>
</td>
<script type="text/javascript">
document.write(document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63").value);
</script>
in FF, IE, Chrome (the latest versions)... and seems to work ok... ar you sure it is about this id?
Replace:
document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:3:j_id63")
with
document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63")
The id is different.
http://jsfiddle.net/wNePW/
My way: code
<form>
<input type="text" value="">
<input type="submit" value="submit"> type a space and press Submit
</form>
$('form').submit(function(){
if($('input').val() == ' ') {
alert($('input').val().length);
}
return false;
});
But I'd like to solve this problem using CSS3 selectors like $('input[value*=" "]')
If you are asking to use CSS3 selector through jquery then $(':input[value*=" "]') should do it.
example: http://www.jsfiddle.net/gaby/cruRd/
If you want to create an actual CSS3 rule in your stylesheet then input[value*=' ']{..} will work, but only for values in the actual attribute (in the source code) and not the value as modified inside the browser..
example: http://www.jsfiddle.net/gaby/VzE9T/
As far as I know, you cannot manipulate data with CSS; it's a formatting language. You don't have variables or functions which help you find something in a string. Use JS instead.