Develop Reference

regex to replace non numeric

I want to replace all my non numeric characters with an empty string. I found this solution
I am trying to replace the value of an input element on change. But when I use above, it is not replacing until I press a number.
Each non-digit I type stays until I type a digit
Ex: 2aaaaa will not be replaced. But as soon as 2aaaa3 is typed it will replace all the a's and it becomes 23
Is this the normal behaviour? How can I achieve my requirement.
component.ts
mobileChanged = () => {
this.mobile = this.mobile.replace(/\D/g,'');
};
angular component.html
<input type="text" [(ngModel)]="mobile" (ngModelChange)="mobileChanged()">

You can use keyup from jQuery or onkeyup from Javascript.
$("document").ready(function() {
$("input").keyup(function() {
let v = this.value.replace(/\D/g, '');
this.value = v;
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="" />

Yes, it's the usual behaviour for ngModelChange but seems you need onkeyup event here to replace Non-digits. Something like-
function mobileChanged() {
var txtinput = document.getElementById("fname");
var x = txtinput.value.replace(/\D/g,'');
txtinput.value = x;
}
<input id ="fname" type='text' onkeyup="mobileChanged()">
See if you still have confusion: https://stackoverflow.com/a/46403258/1138192

compare Two field if the field is in the content of other field using javascript after submit button clicked

Hi I am not a javascript expert thats why I will really appreciate any advice
I have a textfield named try where in I will input something
ex:
try value is
87
then I have another textfield named field11
field11 has a value of
777-a98;87-bx23;000-t88;245-k7
I wanted to compare try and field11 if try is found in the content of field 11 it will set the textfield named msg to 87-bx23 matched
msg value will be
87-bx23 matched
my code is like this but its not giving the desired output I know my comparison is wrong it just I dont know how
<script>
$(document).ready( function(){
$('#submit').click(function() {
if (document.getElementById('try').value != document.getElementById('field11').value)
{
alert('dont match!');
$("#msg").val ("dont match!");
}
else if (document.getElementById('try').value == document.getElementById('field11').value) {
}alert(document.getElementById('try').value + " exists");
$("#msg").val(document.getElementById('try').value + " exists");
});
});
</script>
I also try this but if I input 77 it saying it exist even not
<div id="requirement #2">
<button type="button" id="button2" onclick="StringSearch()">Search</button>
</div>
<script>
function StringSearch() {
var SearchTerm = document.getElementById('try').value;
var TextSearch = document.getElementById('field11').value;
if (SearchTerm.length > 0 && TextSearch.indexOf(SearchTerm) > -1) {
alert("Patient Exists");
} else {
alert("Patient Does not exist click add if you want to add the patient");
$("#msg").val(document.getElementById('try').value + " exists");
$("#t1").val("1");
}
}
</script>

document.getElementById('field11').value.match(new RegExp("(" + "87" + "-[a-z0-9]+);"))[1])
The Generated Regex when try value = 87:
/(87-[a-z0-9]+);/
So what is this monstrosity? We generate a Regex Expression, that looks for the try value followed by a dash, and one or more characters from a-z or 1-9, followed by a semicolon. String.match() is used to determine an array of matches, the array[1] is the first capture group (the part of the RegEx between the brackets), which is in this case 87-bx23

I have tried to rewrite your code to store variables for the elements and use a Regexp to do the search for the value:
<script>
$(document).ready( function(){
var tryElem = document.getElementById('try');
var field1 = document.getElementById('field11');
$('#submit').click(function() {
var regex = new Regexp(tryelem +'[^;]*');
var match = regex.exec(field.value);
if (match)
{
alert(match + " exists");
$("#mag").val(match + " exists");
}
else
{
alert('dont match!');
$("#msg").val ("dont match!");
}
});
});
</script>
The code does more or less the same as yours, except for the regex:
tryelem +'[^;]*'
It builds a regular expression form the the value of tryElem and then it searches forward and matches up to the first semi colon (zero or more characters).
Now the match will contain: '87-bx23'.

You can try this:
<input type="text" id="try"/>
<input type="text" id="field11" value="777-a98;87-bx23;000-t88;245-k7"/>
<input type="text" id="msg"/>
<input type="button" id="submit"/>
And js:
$(function(){
$("#submit").click(function(){
var Try=$("#try").val(),
f11=$("#field11").val(),
msg=$("#msg");
//but if you want search in number part only (before dash sign), uncomment line below and comment next line.
//var r=((";"+f11+";").match(new RegExp(";([^;-]*"+Try+".*?-.+?);"))||[])[1];
var r=((";"+f11+";").match(new RegExp(";([^;]*"+Try+"[^;]*);"))||[])[1];
msg.val(r||"don't match!!");
});
});
You can check or change both of them online

Auto generate name based on user input using jquery

I have two Input fields I want to name based on user input but this name should be lowercase and spaces between words change to "-". I am doing like this
$(function() {
$("#name").keyup(function() {
var name = $("#name").val();
var alias = name.charAt(0);
$("#alias").val(alias);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input name="name" class="text-input medium-input" type="text" id="name" value="" />
<input name="alias" class="text-input medium-input" type="text" id="alias" />
This given me result I write "arslan" in first input field then showing "a" in second input field
Showing only one letter

I want to name based on user input but this name should be lowercase
and spaces between words change to "-".
Use replace
$("#alias").val( name.replace( /\s+/g, "-" ) );
Your function should look like
$(function() {
$("#name").keyup(function() {
var name = $("#name").val();
$("#alias").val( name.toLowerCase().replace( /\s+/g, "-" ) );
});
});

You should copy the whole entry from name input to alias while replacing the spaces with '-' and turning it to lower case.
$("#name").keyup(function() {
$("#alias").val($(this).val().replace(" ", "-").toLowerCase());
});

Simple Solution
var name = $("#name").val().toLowerCase();
var alias = name.split(" ").join("-");
$("#alias").val(alias);

This will help you
$(function() {
$("#name").keyup(function() {
var name = $("#name").val().toLowerCase();
$("#alias").val(name.replace(/-/g,' '));
});
});
The replace will change all - given in the name with space

Unable to match strings with jQuery with blank space

I am trying to match a string inside another but I am not able to do it:
I want to match a string based on another string that I am typing but I get "false" when I "ask" if "Aston Martin" starts with "Aston ".
EDIT:
Note that the filter is a "as you type", and in this case, I have a blank space in the end of "Aston ".
IMPORTANT NOTE:
Based on #mplungjan answer, I had another issue regarding the blank space at the end of the filter string. Testing it, I was getting the charCode 160, so the solution I used was applying the replace to both strings:
.replace(String.fromCharCode(160), ' ')
var value = $("#brand").text();
var brand = $("#filter").val();
alert(brand.substr(0, value.length).toUpperCase() == value.toUpperCase());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="brand">Aston Martin</div>
<input id="filter" value="Aston ">

Using indexOf == 0 will show the string beginning with the brand INCLUDING the space in the value!
var brand = $("#brand").text();
var value = $("#filter").val();
console.log(">"+brand+"<",">"+value+"<",brand.toUpperCase().indexOf(value.toUpperCase())==0);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="brand">Aston Martin</div>
<input id="filter" value="Aston ">
Onkeyup:
$("#filter").on("keyup", function() {
var brand = $("#brand").text();
brand = brand?brand.toUpperCase():"";
var value = $("#filter").val();
value = value?value.toUpperCase():"";
if (brand && value) {
console.log(brand, value,brand.indexOf(value) == 0); // same as regex /^word /
}
else {
console.log("Something is empty");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="brand">Aston Martin</div>
<input id="filter" value="Aston ">

This will work, and dont forget you have a space in the value of the input?
var value = $("#brand").text();
var brand = $("#filter").val();
alert(!!value.toUpperCase().match(brand.toUpperCase()));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="brand">Aston Martin</div>
<input id="filter" value="Aston ">

You can try it like this:
x = "Aston Martin";
if (x.match("Aston")) {
// Code
}
Update1:
And if you want that your string should starts with specific word and you want to match space at end you can do this:
if(x.match(/^Aston /)) {
}

please use this one :
value.toUpperCase().indexOf(brand.toUpperCase())>=0?true:false

Displaying new input value (adding spaces)

This seems embarrassing to ask even for a newbie like me, but I have a huge headache with displaying new value in the html input field after adding spaces between numbers in html input.
Basically, what I want to achieve is to add spaces between numbers in the input field after the user "unclicks" the input.
For example, 123456789123456789 would change to 12 3456 7891 2345 6789. I get the value of users input and add spaces where I want, but I just can't make it appear in the input field. My code looks like this:
'use strict';
$(document).ready(function (){var $inputTwo = $('#separateNumbers');
$inputTwo.change(function() {
var inputNumber = $inputTwo.val();
var separatedNumbers = [];
var part1 = inputNumber.substring(0, 2);
separatedNumbers.push(part1);
for (var i = 2; i < inputNumber.length; i += 4){
separatedNumbers.push(inputNumber.substring(i, i + 4))
}
var displayNumber = separatedNumbers.join(' ');
$inputTwo.val(displayNumber);
})
});
<body>
<div class="wrapper">
<div id="Task1_2">
<h1>Task 1.2</h1>
<label for="separateNumbers">Write more than 10 digits:</label><br/>
<input type="number" id="separateNumbers" placeholder=" i.e. 12345678901234567">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
I don't understand why this doesn't work. I tried to replace last code line with
document.getElementById('separateNumbers').value = displayNumber;
but then I got this in console:
The specified value "87 6178 1" is not a valid number.
The value must match to the following regular expression:
-?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?.
This appears no matter what combination of numbers I put. Unfortunately I don't understand Regex yet, so I don't even know what would be a valid value...

a number does not have spaces in it. change your input to a type = text and it should work

change the type to text because adding space not work in the text format
$(document).ready(function() {
// Displaying new input value (adding spaces) -- Solution
$("#separateNumbers").change(function() {
$inputTwo = $('#separateNumbers');
var inputNumber = $inputTwo.val();
var separatedNumbers = [];
var part1 = inputNumber.substring(0, 2);
separatedNumbers.push(part1);
for (var i = 2; i < inputNumber.length; i += 4) {
separatedNumbers.push(inputNumber.substring(i, i + 4))
}
var displayNumber = separatedNumbers.join(' ');
$inputTwo.val(displayNumber);
});
});
<body>
<div class="wrapper">
<div id="Task1_2">
<h1>Task 1.2</h1>
<label for="separateNumbers">Write more than 10 digits:</label><br/>
<input type="text" id="separateNumbers" placeholder=" i.e. 12345678901234567">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>