RegEx
Let's break the implementation down into multiple steps. For the basic implementation, we want to keep a list of emails in your component's state, and when rendering, render a textbox for each email from this list. This will enable us to then easily add and remove textboxes by simply manipulating the DOM itself. For convenience, you can supply each textbox with an additional attribute that stores its index, although it is also possible to calculate this dynamically. At the end, you can render an additional textbox with placeholder text to enter the next email address. This will ensure that there is always at least one textbox (especially at the start before any data is entered), and that the user always has somewhere to type. The index of this placeholder textbox should be N, where N is the number of elements in the email list.
Next, you need to handle the onChange event for each of your textboxes. Here, you should check if the text is empty, and if so, delete the email corresponding to the index of the textbox from your list. Otherwise, update it to the new value to ensure consistency. When you remove an email, you should also focus the placeholder textbox for better usability.
Then we need to handle entry of characters into the placeholder textbox. As soon as the first character is entered into the placeholder textbox, instead of displaying there, you should intercept the event and add an additional entry to your email list. Focus the new textbox so that the remaining input goes there instead, while keeping the placeholder textbox empty. This gives the user the impression that the placeholder textbox turned into a regular textbox and a new placeholder textbox popped in below.
The last implementation detail is pasting a list of emails. To do this, intercept the onPaste event in the placeholder textbox. Keep in mind that you cannot rely on each system using the same line terminators. As such, since emails cannot contain whitespace, you should simply split the pasted content on whitespace characters. Optionally, you can check the emails you get for validity, and then add all the valid emails you have parsed to the email list in your component state. This will then make React create the required textboxes automatically, as with manual input.
One small detail that we need to address is validation. Contrary to popular belief, valid emails are not entirely trivial to validate. However, there exists a regular expression that correctly verifies virtually every email that adheres to standard conventions, namely ^(([^><()[\]\\.,;:\s@"]+(\.[^><()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))
You can use this expression to do your validation.
There are many different possibilities to answer this question. We will go top down beginning with the browser.
Most of the browsers support the html input tag of type "email" and most of them would automatically warn the user about a wrong format of the address. However there are many standards of email address pattern. Furthermore the user might disable the browser validation, so we should not rely on this.
The second station is the javascript of the browser. Probably the easiest way to validate the email address is to use a regular expression an match the input against this expression. However the user may disable the javascript or send a request in other way than browser. Therefore it's absolutely necessary to validate the email address on the server side. This might be done by a regular expression, but some more sophisticated systems would check the MX record of the domain given in the email address, to be sure it might be a real address of a real mail server.
Replacing String in JavaScript with Regular Expression and the replace function
steps:
- searching the web for replacing texts
- finding regular expression
- searching for suitable regex function
- identifying replace out of (match, exec, replace) as the most suitable function to use
- searching for example how to use replace the right way
- finding and testing the right pattern that matches /s200/
- testing and iterating until the pattern matches the string and the modified string is ready to use
a javascript solution for that particular challenge looks the following way:
var testString = "http://www.google.at/img/s200/";
var partToBeReplaced = /s200/;
var newPart = "s1600";
var replacedTestString = testString.replace(partToBeReplaced, newPart);
Number of words of a String in a WebL program
I was searching for an easy way to count the words of a given String in a WebL program. WebL is considered as outdated, so it was difficult to find information online.
Taggings:
