Develop Reference

Handling multiple items in a single MUI/React TextField

I'm new to JS, React and MUI, and I have a MUI TextField that should accept multiple values like
1*10 5*50 13*250 5*50 1*10
3*33.33 4*25 3*33.33
on a single line. The elements consist of a positive integers, asterisks and positive floating points/integers. What is the best way to approach this?
I have tried writing an onChange handler and a regex for pattern recognition.
const format = /[1-9]+[0-9]*\*[0-9]*[\.]?[0-9]*/g
This should match all possible values with no leading zeros and possible decimals after the multiplication asterisk. The numbers are arbitrary.
I can't wrap my head around how to disable user input/remove everything that doesn't match this pattern on the fly, since onChange changes the TextField value as soon as I press on a button.
Is there a way to mask this?
Are there better ways to do such input formatting?

If you want to match the whole string, going by the pattern you're trying to implement, I would do this
^(?:\d+\*\d*(?:\.\d*)? ?)*$
Here is a working example https://regex101.com/r/o8rvWH/1
If you watch to get the matching pattern you can do this
(\d+\*\d*(?:\.\d*)?)
Here is a working example https://regex101.com/r/OtfWIp/1

Here is my solution which includes most of your requisite.
The leading zero is not left out, but ruled out with regexp.
(\b[1-9]\d*\*(?:0\.(?=\S+[0-9])\d+|[1-9]\d*(?:\.\d+)?\b)(?= |$))+
example:
https://regex101.com/r/T9I7IV/1
I'm not familiar with javascript so you might need to change the \S.

JS: Check if word "handover" contains "hand"

I'm working on this simple, straightforward text content filtering mechanism on our post commenting module where people are prohibited from writing foul, expletive words.
So far I'm able to compare (word-by-word, using .include()) comment contents against the blacklisted words we have in the database. But to save space, time and effort in entering database entries for each word such as 'Fucking' and 'Fuck', I want to create a mechanism where we check if a word contains a blacklisted word.
This way, we just enter 'Fuck' in the database. And when visitor's comment contains 'Fucking' or 'Motherfucker', the function will automatically detect that there is a word in the comment that contain's 'fuck' in it and then perform necessary actions.
I've been thinking of integrating .substring() but I guess that's not what I need.
Btw, I'm using React (in case you know of any built-in functions). Much as possible, I wanna deviate from using libraries for this mechanism.
Thanks a heap!

"handover".indexOf("hand")
It will return index if it exists otherwise -1
To ignore cases you can define all your blacklisted words in lower case and then use this
"HANDOVER".toLowerCase().indexOf("hand")

To detect if a string has another string inside of it you can simply use the .includes method, it does not work on a word by word basis but checks for a sequence of characters so it should meet you requirements. It returns a boolean value for if the string is inside the other string
var sentence = 'Stackoverflow';
console.log(sentence.includes("flow"));

You were on the right track with .includes()
console.log('handover'.includes('hand'));
Returns true

Is it possible to have an emoji-only text input?

I'm building an Ionic2 app and one of my text fields needs to be an emoji-only field.. to make my situation a little harder, the input field can only be 1 emoji long.
From what I know of emojis, some are considered 2 characters, and some are 1, which makes me wonder how I can force only 1 emoji length in a text input.
Is this possible? Essentially just a text field that only accepts 1 emoji..
Any feedback would be great. Thank you!

Since you haven't yet provided your own code I'm not going to answer your whole question.
You could start off by using a regular expression that only allows characters and then modify it using something like the emoji regex library provided below.
var val = "🐬";
if (val.match(/[^a-zA-Z]/g)) { // NOTE: will also match only characters
console.log(val);
} else {
console.log("Only characters allowed.")
}
You could also try a library like the following that's a regular expression to match all Emoji-only symbols as per the Unicode Standard. https://mths.be/emoji-regex
There's also a great article on Optimizing RegEx for Emoji.

Validate beginning of input field with multiple values

I have a login form that users are constantly getting wrong. We are working on better informing the users but we would also like to hint them in the correct direction as they type in the input field.
All IDs are 10 characters and they start one of 4 different ways:
A00
B00
CTR
VST
I would like to hint users if they don't start with one of those 4 options, likely by triggering a hidden element to reveal itself that reminds them what a username looks like.
Most of the jQuery I can figure out, the only part I can't is the actual matching. I'm not really sure how to write the RegEx to make it work.

This will match a correct string
^((A00)|(B00)|(CTR)|(VST)).*$
In JavaScript
if (txt.search(/^((A00)|(B00)|(CTR)|(VST)).*$/) !== -1) {...}

replace all but - ,+, and .

I'm working on a donation webapp, and I need to format a string the will leave minuses (-), pluses (+), and decimals (.). I want people to be able to format their dollar amounts how they want, but leave the numbers and decimals as is.
I currently have the following code:
var raised = $('#raised').val().replace(/\D/g,'');
Any help? Thanks!
UPDATE
Let me explain a little more about why this is an easy/quick way to validate the input.
This is going to be something that administration is going to use one time only, with only one person in charge. It's not going to be something where multiple users input to submit actual money. I agree that this could be much better planned, but this is more of a rush job. In fact, showing you what I have done is going to be the quickest way to show you: http://www.cirkut.net/sub/batterydonate-pureCSS/
This is going to be projected during an event/auction so people kind of have an idea of how much money has been donated.
The person in charge of typing in donations is competent enough to type valid inputs, so I was putting together what I could as quickly as possible (the entire thing needs to be done by noon tomorrow).
But anyways I found what I needed. Thanks a lot everyone!

To do exactly what you're asking, you could use this regex:
var raised = $('#raised').val().replace(/[^-+.\d]/g,'');
But be advised, you'll still need to verify that the returned string is a valid number, because strings like '---' and '+++' will pass. This, perhaps, is not even something you want to do on the client-side.

Try the following regex:
.replace(/[^\d\-+\.]/g, '')
Since this doesn't guarantee you have a valid number and not something like +-12.34.56--1, You can then validate that you have a valid number with something like:
/^[-+]?\d+(\.\d+)?$/

A regular expression character class can be negated by adding a ^ symbol to the beginning.
In your case, this makes it fairly simple: you could add all the characters you want to keep in a character class and negate it.
var raised = $('#raised').val().replace(/[^\d\.\+\-]/g,'');
Hope that helps.