Dynamically Set ng-pattern base on user inputs - javascript

I have input box
<input type="text" class="text-primary" ng-pattern="ip_regex or ipv6_regex" name="newIP" ng-model="macbinding.newIP" ng-change="checkDuplicates('newIP')">
I already 2 patterns for IPv4 and IPv6 ready.
$scope.ip_regex = '^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$';
$scope.ipv6_regex = '((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:)))(%.+)?';
But how can I apply those ng-pattern dynamically to that input base on-change if a string contain a : ?
Ex. 2001::1
If inputs contain : then, I know it an IPv6 then, I will use the ng-pattern="ipv6_regex"
Is this something that I can achieve on front-end HTML, or do I need to parse the input and do a logic in my angular controller ?
Can I use ng-if for that ?

You can use a combination of ng-model to store and examine your user's input, and a timeOut function to tell you when to check the input. For example.
Your input tag would look like this
<input id="textBox" ng-model="$ctrl.userInput" value="$ctrl.userInput"/>
And the Js (I wrote it in typescript, but it should be readable enough that you get the gist.)
userInput: string = '';
//setup before functions
typingTimer: number; //timer identifier
//on keyup, start the countdown
$('#textBox').on('keyup', function () {
if (typingTimer){
clearTimeout(typingTimer);
}
//if no keyup event is found in 3000ms (3 seconds) execute doneTyping()
typingTimer = setTimeout(doneTyping, 3000);
});
//user is "finished typing," do something
function doneTyping() {
//check for ':'
var foundSemiColon: boolean = false;
//for every character in, userInput see if that character's code value equals 58.
//58 is the ASCII representation of a semi-colon
for (var i: number = 0; i < userInput.length; i++) {
if (userInput.charCodeAt(i) === 58) {
//Semi-colon found use IPv6
break;
}
}
//if foundSemiColon === false you didn't find a semi-colon
if (!foundSemiColon) {
//use IPv4
}
//Now that you're done and know what to use, clear your timeOut event
clearTimeout(typingTimer);
}

Related

Google App Script Trigger Id Format

I am working on Google Spreadsheet's project where I am adding/deleting TimeBased triggers through scripting.
All triggers fired will run one function, which will check its Id and run function accordingly.
I am saving starting trigger and saving it's id with this code.
function startTimer(rn) {
var triggerid = ScriptApp.newTrigger('mainFunction')
.timeBased()
.everyMinutes(1)
.create().getUniqueId();
SpreadsheetApp.getActiveSheet().getRange(1, 8).setValue(triggerid);
}
This functions save's trigger id in this format '6295890543675972447'
Now when trigger is fired and runs function 'mainFunction'.
Using this code I am trying to get the id of trigger.
function mainFunction(e) {
var triggerId = e.triggerUid;
Logger.log(triggerId);
}
At this point, I get the trigger id in this format '6.29589E+18'
If I try to change format with toString() method , the format changes to '6295890543675973000'
I cant match with both formatting to my saved id.
Any idea how can I get id back in format it was when adding trigger?
Thanks
I spent some hours on this, got some hair off.
And I found this page. It has a piece of code that strangely works when you pass e.triggerUid in it, and not when using it directly :
function getFileByTriggerId(triggerId){
var triggers = ScriptApp.getProjectTriggers();
for(var i =0; i<triggers.length; i++){
if(triggers[i].getUniqueId() == triggerId){
return triggers[i].getTriggerSourceId();
}
}
}
Hope it will help someone
When you request the id of a trigger object using its getUniqueId() method, the value returned is a numerical String.
However when a function is called by the trigger, the triggerUid property of the event object will be that string converted to a Number.
The issue is that the string id often (but not always) expresses an integer value larger than the maximum integer value Apps Script can handle safely. When this happens the conversion from string to number results in the zeros in the least significant digits.
So, to compare the two properly you just need to convert the string id to a number, this ensures the same zeroing will occur.
someTrigger.getUniqueId() === event.triggerUid
// false - because the left side is a string, and the right is a number.
Number(someTrigger.getUniqueId()) === event.triggerUid
// true - both sides are now numbers, the same number
someTrigger.getUniqueId() == event.triggerUid
// true - because using the standard comparison operator the string is automatically converted to a number in the background
Here's a note about strict v.s. standard comparison operations in Javascript.
Here's some Apps Script that demonstrates all of the above:
// Run onceOffClockTimer() and wait up to 1 min for the event to fire, then check your log. You might have to run it a few times to see a trigger id where the zeroing occurred
function onceOffClockTimer() {
var newTriggerId = ScriptApp.newTrigger('timerCallbackFn')
.timeBased()
.after(5000)
.create()
.getUniqueId();
}
function timerCallbackFn(triggerEvent) {
var eventTriggerId = triggerEvent.triggerUid,
triggers = ScriptApp.getProjectTriggers();
Logger
.log('### Event Object ###')
.log('id: %s', eventTriggerId)
.log('id type: %s', typeof eventTriggerId)
.log('id as String: %s\n', eventTriggerId.toString());
var largestSafeInteger = 9007199254740991; // Obtained by Number.MAX_SAFE_INTEGER in a Chrome console
Logger
.log('### Interesting Fact ###')
.log('In Apps Script the largest safe integer is: %s\n', largestSafeInteger);
for (var i = 0, x = triggers.length; i < x; i++) {
var triggerID = triggers[i].getUniqueId();
Logger
.log('### Trigger Object [%s] ###', i)
.log('id: %s', triggerID)
.log('id type: %s', typeof triggerID)
.log('id as Number: %s\n', Number(triggerID))
Logger
.log('### Comparisons ###')
.log('Strict (Trigger Event ID === Trigger ID) is %s ', eventTriggerId === triggerID)
.log('Strict (Trigger Event ID === Trigger ID as Number) is %s', eventTriggerId === Number(triggerID))
.log('Direct (Trigger Event ID == Trigger ID) is %s', eventTriggerId == triggerID);
}
}
Logger.log('' + triggerId);;;;
The trigger Id could be a large number (long 8 byte integer, or an even bigger number stored as an object), to overcome this, convert it to binary and then to 64 bit encoded string. This way you can safely store, and compare as well.
var v = Utilities.base64Encode(Utilities.newBlob(e.triggerUid).getBytes())
or to compare
if(Utilities.base64Encode(Utilities.newBlob(e.triggerUid).getBytes()) === Utilities.base64Encode(Utilities.newBlob(triggers[i].getUniqueId()).getBytes()))
As triggerId is a Number object and as such it is automatically converted to the exponential notation.
To handle this you can extend the Number.prototype to handle the correct representation.
Object.defineProperty(Number.prototype, 'toLongString', {
value: function() {
var parts = this.toString().split("e+");
var first = parts[0].replace('.', "");
var zeroes = parseInt(parts[1], 10) - (first.length - 1);
var longString = first;
for (var i = 0; i < zeroes; i++) {
longString += "0";
}
return longString;
}
});
function mainFunction(e) {
var triggerId = e.triggerUid.toLongString();
Logger.log(triggerId);
}
I had this same problem. The solution that worked for me was: toPrecision([numberOfDigits]).
For example:
([largenumber]).toPrecision(27)
Here is the source:
https://teamtreehouse.com/community/covert-scientific-notation-within-variable-to-javascript-number-when-scientific-notation-is-yet-unknown
I hope that this helps someone!

How to get the -real- last character typed in input with maxlength?

I wanted to know which character the user is typing into an input:
I have an input:
<input maxlength="20"/>
and a script that returns the last typed char:
var eingabe;
$('form').on('keypress', function(event) {
/// if no whitespace:
if (String.fromCharCode(event.keyCode).replace(/\s/g, "").length > 0) {
eingabe = String.fromCharCode(event.keyCode);
$('#eingabe').html("<div>Eingabe : "+ eingabe +"</div>");
}
});
My question is:
because my input has a maxlength attribute, the last typed character on the keyboard is sometimes not the last -real- typed character into the input because the input is "full". How can I get the last character typed into the input?
I haven't tried it, but it must work...
Set onkeypress= or onkeydown= on the Input element and store the key value in a LastChr variable.
I had a similar problem. I wanted to call a function if the user types a specific character into my input field. I solved it with the following:
var input = document.getElementById('myInput');
input.addEventListener('input', function() {
// Get cursor position
var start = this.selectionStart;
// Get last typed character
var lastChar = String.fromCharCode(this.value.charCodeAt(start - 1));
if(lastChar === '[YOURCHARHERE]') {
// do something
}
});
Please keep in mind, that 'input' is only supported down to IE8, but if you don't care about a proprietary browser, you should be fine. I hope this helps.
Inside your function, use the value of the input element to get the last character like $('#input_field').val().substr($('#input_field').val().length - 1) or use your best coding skill to accomplish something similar without accessing the field twice, wink wink.
Use keyup instead:
$('form').on('keyup', function(event) {
var cursorPos = event.target.selectionStart;
var lastTypedChar = elem.target.value[cursorPos - 1];
});

Browser Crashes before Input is Entered

I'm writing a program in javascript that is supposed to be a fast paced typing challenge. The issue is that my script that's checking for input is crashing my browser before I can enter anything. I thought that it'd pause to wait for input but it seems like I might be wrong?
Here is the function that crashes my browser:
var level1 = function () {
var letter;
var ascii;
var ncorrect = 0;
var input = "0";
var timedout = false;
document.getElementById('prompt').text = "Level 1 : Type Here!" // this is supposed to change text on the page... It doesn't work but not that's not my question.
while (ncorrect < 26){
timedout = false;
setTimeout(timedout = true, 5000);
ascii = Math.floor(Math.random() * 122) + 97; // ASCII's of lower case letters
letter = String.fromCharCode(ascii);
document.getElementById('letter').text = letter;
input = document.getElementById('keyinput');
console.log(input);
if(!timedout && input === letter) {
clearTimeout();
ncorrect++;
}
else {
ncorrect = 0;
}
}
return 0;
}
If it's not a simple fix...
What would be a better way of monitoring input and responding to a right answer?
Thanks, I know it's a little broad of a question but I'm struggling to figure out what I'm looking for.
Javascript is already running an event loop in the background, so you don't need your own. This loop runs continuously and checks to see if any events have fired on any of the HTML DOM Elements. For example, if a button has been clicked, the event loop will pick up a click event for that element. You can add event handlers to the element, which are functions that fire when certain events occur to that element. What you want to do is set an event handler for the event that fires whenever the text in your input area (I'm assuming that the user is typing in an input or textarea tag) is fired.
For example, the following simple program will create a typing challenge 100 random characters long
var ncorrect = 0;
var timedout = false;
//select an empty paragraph to fill with text
var challengeText = document.getElementbyId("challengeText");
challengeText.innerHtml = "";
//Append 100 random characters to the paragraph
for (var i=0;i<100;i++) {
challengetText.innerHtml += String.fromCharCode(Math.floor(Math.random() * 122) + 97);
}
//Check the number of characters typed since the last the loop hit the element
var lastCharsTyped = 0;
var charsTyped = 0;
//Grab the user input
var input = document.getElementById("userInput")
//Set the event handler to fire when the user presses a key (technically, when they lift their finger
input.onkeyup = function(keyEvent){
//Ugly ternary to deal with the fact that not all browsers use the same api. If you haven't seen this before it means if which is a key of keyEvent then keyCoe is event.which, otherwise it's event.keyCode
var keyCode = ('which' in keyEvent) ? keyEvent.which : keyEvent.keyCode;
//Check if the key pressed is equal to the character in the text to match at the same position
if (keyCode === challengeText.innerHtml.charCodeAt(input.value.length)) { ncorrect ++} else {ncorrect = 0;}
}
It won't handle deletes or shift very gracefully, but it should give you an idea of the direction to take.
As a stylistic note, its customary to declare and initialize your variables right before you use them, rather than at the start of your program.
You can use setTimeout() and pass in a function that checks the input after whichever time you specify. Here's one way to implement this:
setTimeout( function () {
var textbox = document.getElementById('textbox');
if (textbox.value !== 'The quick brown fox jumps over the lazy dog.') {
alert('You didn\'t pass.');
} else {
alert('Congratulations!');
}
}, 5000);
Type in the phrase "The quick brown fox jumps over the lazy dog."
<input type="textbox" id="textbox"></input>
setTimeout is passed a function expression that checks user input and spits out an alert based on their typing prowess. The second argument 5000 means the function passed into setTimeout will be called at the nearest opportunity after 5000 ms has passed.

Delaying regex for more specific matches

I have a scenario where I need to run regex tests on a numeric input that represents phone company operator services.
In one instance, there is a prefix 118 which can act on its own or with a suffix of up to two digits.
At the moment, my function looks something like the below. My problem is that the least specific '118' exact match fires before the more specific one.
There is no sleep/wait in Javascript and unless I'm mistaken, I don't think I can get setTimeout to return a simple "return true" ?
I don't mind if the answer to this question is in pure Javascript or Jquery, but not having a dependency on Jquery would be preferable.
function isOperatorService(vNumber) {
var vNumber = vNumber.replace(/\D/g,'');
if (/^((44){0,1}118[0-9]{3})$/.test(vNumber)) {
console.log("118 specific");
return true;
}
if(/^((44){0,1}[19]{1}[0-9]{1}[0-79]{1})$/.test(vNumber)) {
console.log("Other shortcodes");
return true;
}
return false;
}
UPDATE: Re: "Provide your input and expected output."
Pretty much as I described above, in Pseudo-code :
if == 118
wait incase the user has not finished typing (e.g. wait incase 118118...)
else
do other regex cheks
Add a simple debouncer:
var timeout;
var typeDelay = 300; // wait after last type
var changeEvents = "propertychange keyup input paste change";
$('#yourinput').on(changeEvents, function () {
//clear your timeout
clearTimeout(timeout);
// Add another listener
timeout = setTimeout(function () {
// Do your regex here
function_ended_typing();
}, typeDelay);
});

Extract substring out of a user input phone number using Javascript

I am getting phone number input from user as +XXX-X-XXX-XXXX that (+XXX as country code), (X as city Code), (XXX as 1st 3 digits) and , (XXX as 2nd 4 digits). I used regular expression to confirm the entry as in following code;
function validate(form) {
var phone = form.phone.value;
var phoneRegex = /^(\+|00)\d{2,3}-\d{1,2}-\d{3}-\d{4}$/g;
//Checking 'phone' and its regular expressions
if(phone == "") {
inlineMsg('phone','<strong>Error</strong><br />You must enter phone number.',2);
return false;
}
if(!phone.match(phoneRegex)) {
inlineMsg('phone','<strong>Error</strong><br />Enter valid phone <br />+xxx-x-xxx-xxxx (or) <br />00xxx-x-xxx-xxxx.',2);
return false;
}
return true;
}
Its working very fine but the problem is that
EDIT : If the user inputs as +XXXXXXXXXXX (all together) and hit enter or go to another field, the input it self set according to the Regex that is +XXX-X-XXX-XXXX.
Can some one guide me with some example how to do this task.
Thank you
Set the element's onblur method a callback as follows:
var isValidPhoneNumber = function(string) {
...
}
var reformat = function(string) {
/*
* > reformat('example 123 1 1 2 3 123-45')
* "+123-1-123-1234"
*/
var numbers = string.match(/\d/g);
return '+' + [
numbers.slice(0,3).join(''),
numbers.slice(3,4).join(''),
numbers.slice(4,7).join(''),
numbers.slice(7,11).join('')
].join('-');
}
var reformatPhoneNumber = function() {
var inputElement = this;
var value = inputElement.value;
if (isValidPhoneNumber(value))
inputElement.value = reformat(inputElement.value);
else
// complain to user
}
Here are two example ways you could set the onblur callback handler:
document.getElementById('yourinputelement').onblur = reformatPhoneNumber;
<input ... onblur="reformatPhoneNumber"/>
You can augment reformatPhoneNumber with more validation code if you'd like, or just constantly validate the number as the user is typing it.
To only do this if your phone number is of the form +ABCDEFGHIJK, then add an string.match(/^\+\d{11}$/)!==null to your if statement. (^,$ mean the start and end of the string, \+ means a plus sign, and \d means a digit 0-9, repeated exactly {11} times). Specifically:
function isPlusAndEleventDigits(string) {
/*
* Returns whether string is exactly of the form '+00000000000'
* where 0 means any digit 0-9
*/
return string.match(/^\+\d{11}$/)!==null
}
Try shaping the input:
result = subject.replace(/^((\+|00)\d{2,3})-?(\d{1,2})-?(\d{3})-?(\d{4})$/mg, "$1-$3-$4-$5");
Then do next procedure.

Categories

Resources