We Keep Coding

React Replacing Special Characters in CSS `content`

Issue
When loading my React webapp, sometimes special characters (e.g. ⋮) are replaced with strings of other characters (e.g. â‹®). The special characters appear correctly most of the time, but when this bug occurs all the below-listed special characters fail to display correctly. I am unable to intentionally replicate the issue.
Code Sample
The special characters are all within the CSS styles:
.someElement:before {
content: "⋮";
}
Example Characters
Here are the unintended replacements that are occurring with seemingly random frequency:
Intended Character
Characters that Appear
⋮
â‹®
▾
â–¾
✔
✔

For using special characters in CSS you must add their CSS entity instead of only character
in your case you want to add ⋮ to css which its entity code is \22EE
.someElement:before {
content: "\22EE";
}
for more entity codes check out here
https://www.w3schools.com/cssref/css_entities.asp

JavaScript Regex For Sentence Not Working

So I am trying to write a regex to validate a normal sentence with no weird characters other than the basic ones you would see in a sentence (e.g: .,':<>... etc) and that is no longer than 512 characters. I am struggling to figure out how to do this, even after trying to look up the appropriate documentation for it.
The test code with the regex I have right now is below, however this does not work unless I remove all special characters:
const sentence = "This is a test sentence with some special characters ./<>'...";
if (/^[\w]{1,512}$/i.test(sentence)) {
console.log("You provided a valid sentence.");
}
How do I make it so that this regex allows for basic sentence characters?
Also, are there any helpful tools that I can use to create regex's for JavaScript? Thanks in advance.
Edit: I now realize that I need to just add in all the characters that I want to allow, but now I am unsure how to do so without breaking syntax and including the ' and " characters.
const sentence = "This is a test sentence with some special characters ./<>'...";
if (/^[\w~!##$%^&*()_+{}[]:";\'<>?,./]{1,512}$/i.test(sentence)) {
console.log("You provided a valid sentence.");
}

After help from others in the comments of my original post, I managed to get what I wanted with the following code:
const sentence = "This is a test sentence with some special characters ./<>'...";
if (/^[\w~!##$%^&*()_+{}[]:";\'<>?,.\/]{1,512}$/i.test(sentence)) {
console.log("You provided a valid sentence.");
}
Thank you to those who helped me!

KnockoutJS validation - Model variable regex not behaving as expected

I have a knockout model build for a form and am using knockout for validation also. One particular field is giving me issues. The requirement for the textbox is it should allow any number of numerics [0-9], and optionally, up to 2 decimal places. My variable looks as follows
var debtIncomeRatio = ko.observable().extend({
required: {
onlyIf: function () {
return (isQualified() == "Qualified" && (!nonReportable() && !isFinanced()));
},
message: "* Required"
},
pattern: {
message: '* Number, no more than 2 decimal places',
params: '^[0-9]+(\.[0-9]{1,2})?'
}
});
My regex expression above, ^[0-9]+(\.[0-9]{1,2})?, should work from every forum and thread I have read. I have also tested it on sites like https://regex101.com/, which verifies that it should work. But in reality, when entering data on my form, it is allowing things such as 33,33, 33!33
or any special character in place of a decimal. Have I got a piece incorrect somewhere? Or does anybody know why it is it behaving this way?

Try using a regex literal instead of a string.
pattern: {
message: '* Number, no more than 2 decimal places',
params: /^[0-9]+(\.[0-9]{1,2})?/
}

I'm not sure why, but I couldnt not get a regex literal to work either, but I found my error when using a regex string. Referring to this answer I found on S.O. Knockout-Validation Using Regular Expression to Validate a Phone Number, when using a regex string you must escape your backslashes, which I didn't know.

Regular expression for fax number validation in a JavaScript registration form

I am a complete newbie when it comes to regular expressions. Even after reading guides about them, I still have a hard time formulating my own. I am trying to get my form to validate the fax number in the +12345678910 format. I have some code, but it allows me to submit mixed numbers and letters, as well as submit data with blank spaces and without filling out the faxnum text box completely. I would strongly appreciate any help with the form and tips on how to become more proficient with regex.
var fax = document.registration.faxnum;
faxval(fax);
function faxval(fax)
{
var numbers = /[\+? *[1-9]+]?[0-9 ]+/; //Bad regex
if (fax.value.match(numbers))
{
document.getElementById("faxmsg").innerHTML=("Everything is OK.");
faxmsg.style.color="green";
}
else
{
faxmsg.innerHTML=("Invalid fax number.");
faxmsg.style.color="red";
}
};

To match a number like +12345678910, try: \+1[2-9][0-9]{9}
I assume that the +1 portion is the international number code, 234 is the area code, 567 is the exchange and 8910 is the rest of the number. This pattern would also match a number such as +12125551212.
The first digit of any U.S. or Canadian phone number must be 2 through 9. So we can allow that as the first character ([2-9]). Then the rest of the number will be 9 digits long, 0 through 9 ([0-9]{9}).
If you want to allow - or . too, you can use: \+1(|\.|\-)[2-9][0-9]{2}(|\.|\-)[0-9]{3}(|\.|\-)[0-9]{4}. The (|\.|\-) part means "allow no character OR a . character OR a - character."

restrict characters in form field

I've an HTML field in a form and, using JS and Regex, I must restrict the characters the user can insert in the field. The user of the form can only insert the following characters ( ) * + ^ / X x, and numbers and spaces (when he digits or pastes a different character nothing is written). Is this possible? I need the Regex, I eventually know how to do with JS.

Try this regex
[^\(\)\*+\^/Xx0-9 ]
Here we are trying to find a pattern which contains none of the allowed characters. If you find it this means that the character entered was wrong.

There is no right or wrong answer to this.
Usually it is less expensive to check using the bias of the logic for the particular condition.
If it sounds better saying whats allowed, then use the allowed (positive) character class.
Allowed class: [()*+^/Xx0-9 ], Checks: <space> (-+ /-9 X \^ x
Not allowed class: [^()*+^/Xx0-9 ], Checks: \0-\37 !-' , \- . :-W Y-\] _-w y-\377
Statistically, if %99 of the data enterred were valid, the 'Allowed' class would do less work in that
not every character or range has to be checked.
Where the 'Not-Allowed' class will have to check every range.
In this particular case, the negative class has many more ranges and characters to check, its borderline
more efficient if most of the data were invalid,

With regard to:
[^\(\)\*+\^/Xx0-9 ]
None of those characters need to be escaped inside a set (but it is okay to do so).
If you want to restrict as the user types (this uses jquery methods):
$('#in1').keyup(function (evt) {
var content = $('#in1').val();
$('#in1').val(content.replace(/[^()*+^/Xx0-9]/g, ""));
return true;
});
Where 'in1' is the id of the input.