Extracting strings from an input field using regular expressions and jQuery - javascript

I am trying to match a string in an input field using a regular expression /[1-9][a-zA-Z]/ and insert it into a <p> tag using jQuery.
I modified this example from the jQuery API docs to include the following if statement. When I type '1A' in the input field it works, however I want to exclude the rest of the string so that the <p> only includes the matched string portion.
$("input").keyup(function () {
if($(this).val().match(/[1-9][a-zA-Z]/)){
var value = $(this).val();
};
$("p").text(value);
}).keyup();
Did I explain that clearly? Could anyone point me in the right direction?
Much appreciated,

So what you are doing in the above code is that if the value of the input field matches the regular expression, you assign its value to <p> tag. Since, you want to assign the matched string to the <p> tag, you should do:
$("input").keyup(function () {
var match = $(this).val().match(/[1-9][a-zA-Z]/);
if(match){
var value = match[0]; // Your problem was here
};
$("p").text(value);
}).keyup();
The match method of a String returns an array containing the match if it passed or undefined if the match failed.

Related

JS Regex Pattern Used In Data-XXX Attributes Not Working

i am trying to set regex pattern in input field attribute and use js to validate it.. but somehow it's not working..
if i use same pattern directly on js it works.. but not through the attribute..
here is my html code:
<input type="text" name="tPhoneNumber" id="tPhoneNumber" style="width:90%;" data-name="Phone Number" data-group="NewEntry" data-required="y" data-pattern="/^\+44[\d]{10}$/" />
and here is the js code:
//this works
if (/^\+44[\d]{10}$/.test(inputs[i].value))
{
console.log("matched");
}
else
{
console.log("not matched");
}
//this does not works, it's always failed regardless whether the text box has correct value or not
if(!inputs[i].value.match(inputs[i].dataset.pattern))
{
var msg = `Invalid data entered in "${inputs[i].dataset.name}" field!<br/>You have entered = ${inputs[i].value}`;
return ShowError(msg);
}
what i am doing wrong here?
thanks in advance
best regards
Since data attribute inside your input is just string, not a RegExp object, you should remove slashes / at start and end of its value: data-pattern="^\+44[\d]{10}$"
var input = document.getElementById('tPhoneNumber');
//this works
if (/^\+44[\d]{10}$/.test(input.value))
{
console.log("matched");
}
else
{
console.log("not matched");
}
//this should works too
if(!input.value.match(input.dataset.pattern))
{
console.log(`Invalid data entered in "${input.dataset.name}" field!<br/>You have entered = ${input.value}`);
}
<input type="text" name="tPhoneNumber" id="tPhoneNumber" value="+440123456" style="width:90%;" data-name="Phone Number" data-group="NewEntry" data-required="y" data-pattern="^\+44[\d]{10}$" />
Your in-code regex works because you are using a regular expression literal, which creates an instance of RegExp. A regular expression literal is a regular expression placed between forward-slashes (optionally followed by flags).
Your attribute pattern does not work because custom data attributes are represented as strings in JavaScript.
So when you call .match(dataset.pattern), you pass a string instead of a RegExp object. The string converts to a RegExp object.
The leading and trailing forward-slashes are JS syntax for creating a RegExp object, so data-pattern and your JS RegExp are not the same.
data-pattern should only represent the regular expression, so that it will be converted correctly; remove the forward-slashes of data-pattern.

How to find and replace text using regex?

I have the following text as an input.
This is specified input. This is Specified input.
And I want the below output.
This is <span>specified</span> input. This is <span>Specified</span> input.
If I do str.replace(\specified\gi, '<span>specified</span>') it will replace like this
This is <span>specified</span> input. This is <span>specified</span> input.
How can I replace this string with the matched element
Replace with <span>$&<span> to insert the matched text:
const str = 'This is specified input. This is Specified input.';
const result = str.replace(/specified/gi, '<span>$&<span>');
console.log(result);
Use $& to retrieve the matched string.
You also have the wrong kind of slash around your regexp.
var str = "This is specified input. This is Specified input.";
console.log(str.replace(/specified/gi, '<span>$&</span>'));

replace OR prepend values through jquery

I have a string value in a variable var string which can be
var string = '$ <input id='text'>';
OR
var string = <input id='text'>;
I need to replace anything before <input... whether it may be $ or any word. And if nothing is present need to prepend with the new value which is in var newValue.
I've tried it as follows but it works fine only if something is present before the input tag.
function replaceValue(newVal) {
amount.html(amount.html().replace(/[^\s]+/, newVal));
}
Is there any way I can prepend the value if nothing is present before input tag and restrict anyhow that <input... should not be replaced?
Cut off everything before the input and prepend the string you want to replace with.
To fix your code, you'd do:
function replaceValue(newVal) {
amount.html(newVal + amount.html().slice(amount.html().indexOf('<input')));
}
and a runnable example without jQuery can be found here: https://jsfiddle.net/rffxbfhj/

Get PHP captcha value by JavaScript

I want to make some kind of JavaScript validation. I have been using some PHP script to generate captcha code.
My Dom is:
<img src="http://examle.com/captcha_code_file.php?rand=1846368456" name="6_letters_code" id="captchaimg">
Is there a way to grab number 1846368456 and compere with input field?
Will it work something like this:
var a = document.getElementById("captchaimg");
var b = a. val();
a.val() wouldn't be valid javascript either. If the element had a value attribute the proper syntax would be a.value. To grab the source element use a.src. Then you need to parse out the random number:
var src = a.src;
var match = src.match(/rand=(\d+)$/);
var rand = match.length > 1 ? match[1] : null;
What this is doing is taking the src value and matching off the last term rand=NUMBER. Since we wrapped the \d+ in () it will match to that value in the second element of the match array.
For more information on match see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match There is also a link for regular expressions there as well.

How can i get value with javascript regular expressions

i have following text
http://www.mydomain.com/#!/account/?id=17
and i am getting # with window.location.href which is giving me
#!/account/?id=17
now i want to extract that id value with preg_match or any regular expression because that id value is dynamic...
actually i am loading data with jquery ajax...please let me know the exact expression for getting value of id...
Try this:
"#!/account/?id=17".match(/id=(.*)/)[1]
EDIT
var result = window.location.href.match(/id=(.*)/);
match returns an array with two positions:
result[0] = all matched string ("id=17")
result[1] = first group match ("17")

Categories

Resources