Skip to content

Commit f81d857

Browse files
a-h-ibraaar
a-h-i
and
braaar
authored
feat(isRgbColor): add allowSpaces option to allow/disallow spaces between color values (#2029)
Co-authored-by: Brage Sekse Aarset <[email protected]>
1 parent 7d5ea2c commit f81d857

File tree

3 files changed

+222
-2
lines changed

3 files changed

+222
-2
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ Validator | Description
158158
**isPort(str)** | check if the string is a valid port number.
159159
**isPostalCode(str, locale)** | check if the string is a postal code.<br/><br/>`locale` is one of `['AD', 'AT', 'AU', 'AZ', 'BA', 'BE', 'BG', 'BR', 'BY', 'CA', 'CH', 'CN', 'CO', 'CZ', 'DE', 'DK', 'DO', 'DZ', 'EE', 'ES', 'FI', 'FR', 'GB', 'GR', 'HR', 'HT', 'HU', 'ID', 'IE', 'IL', 'IN', 'IR', 'IS', 'IT', 'JP', 'KE', 'KR', 'LI', 'LK', 'LT', 'LU', 'LV', 'MG', 'MT', 'MX', 'MY', 'NL', 'NO', 'NP', 'NZ', 'PL', 'PR', 'PT', 'RO', 'RU', 'SA', 'SE', 'SG', 'SI', 'SK', 'TH', 'TN', 'TW', 'UA', 'US', 'ZA', 'ZM']` OR `'any'`. If 'any' is used, function will check if any of the locales match. Locale list is `validator.isPostalCodeLocales`.
160160
**isRFC3339(str)** | check if the string is a valid [RFC 3339][RFC 3339] date.
161-
**isRgbColor(str [, includePercentValues])** | check if the string is a rgb or rgba color.<br/><br/>`includePercentValues` defaults to `true`. If you don't want to allow to set `rgb` or `rgba` values with percents, like `rgb(5%,5%,5%)`, or `rgba(90%,90%,90%,.3)`, then set it to false.
161+
**isRgbColor(str [,options])** | check if the string is a rgb or rgba color.<br/></br>`options` is an object with the following properties<br/><br/>`includePercentValues` defaults to `true`. If you don't want to allow to set `rgb` or `rgba` values with percents, like `rgb(5%,5%,5%)`, or `rgba(90%,90%,90%,.3)`, then set it to false.<br/><br/>`allowSpaces` defaults to `true`, which prohibits whitespace. If set to false, whitespace between color values is allowed, such as `rgb(255, 255, 255)` or even `rgba(255, 128, 0, 0.7)`.
162162
**isSemVer(str)** | check if the string is a Semantic Versioning Specification (SemVer).
163163
**isSurrogatePair(str)** | check if the string contains any surrogate pairs chars.
164164
**isUppercase(str)** | check if the string is uppercase.

‎src/lib/isRgbColor.js

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,35 @@
1+
/* eslint-disable prefer-rest-params */
12
import assertString from './util/assertString';
23

34
const rgbColor = /^rgb\((([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5]),){2}([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\)$/;
45
const rgbaColor = /^rgba\((([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5]),){3}(0?\.\d|1(\.0)?|0(\.0)?)\)$/;
56
const rgbColorPercent = /^rgb\((([0-9]%|[1-9][0-9]%|100%),){2}([0-9]%|[1-9][0-9]%|100%)\)$/;
67
const rgbaColorPercent = /^rgba\((([0-9]%|[1-9][0-9]%|100%),){3}(0?\.\d|1(\.0)?|0(\.0)?)\)$/;
8+
const startsWithRgb = /^rgba?/;
79

8-
export default function isRgbColor(str, includePercentValues = true) {
10+
export default function isRgbColor(str, options) {
911
assertString(str);
12+
// default options to true for percent and false for spaces
13+
let allowSpaces = false;
14+
let includePercentValues = true;
15+
if (typeof options !== 'object') {
16+
if (arguments.length >= 2) {
17+
includePercentValues = arguments[1];
18+
}
19+
} else {
20+
allowSpaces = options.allowSpaces !== undefined ? options.allowSpaces : allowSpaces;
21+
includePercentValues = options.includePercentValues !== undefined ?
22+
options.includePercentValues : includePercentValues;
23+
}
24+
25+
if (allowSpaces) {
26+
// make sure it starts with continous rgba? without spaces before stripping
27+
if (!startsWithRgb.test(str)) {
28+
return false;
29+
}
30+
// strip all whitespace
31+
str = str.replace(/\s/g, '');
32+
}
1033

1134
if (!includePercentValues) {
1235
return rgbColor.test(str) || rgbaColor.test(str);

‎test/validators.test.js

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4736,9 +4736,53 @@ describe('Validators', () => {
47364736
'rgba(3%,3%,101%,0.3)',
47374737
'rgb(101%,101%,101%) additional invalid string part',
47384738
'rgba(3%,3%,101%,0.3) additional invalid string part',
4739+
'r g b( 0, 251, 222 )',
4740+
'r g ba( 0, 251, 222 )',
4741+
'rg ba(0, 251, 22, 0.5)',
4742+
'rgb( 255,255 ,255)',
4743+
'rgba(255, 255, 255, 0.5)',
4744+
'rgba(255, 255, 255, 0.5)',
4745+
'rgb(5%, 5%, 5%)',
47394746
],
47404747
});
47414748

4749+
// test empty options object
4750+
test({
4751+
validator: 'isRgbColor',
4752+
args: [{}],
4753+
valid: [
4754+
'rgb(0,0,0)',
4755+
'rgb(255,255,255)',
4756+
'rgba(0,0,0,0)',
4757+
'rgba(255,255,255,1)',
4758+
'rgba(255,255,255,.1)',
4759+
'rgba(255,255,255,0.1)',
4760+
'rgb(5%,5%,5%)',
4761+
'rgba(5%,5%,5%,.3)',
4762+
],
4763+
invalid: [
4764+
'rgb(0,0,0,)',
4765+
'rgb(0,0,)',
4766+
'rgb(0,0,256)',
4767+
'rgb()',
4768+
'rgba(0,0,0)',
4769+
'rgba(255,255,255,2)',
4770+
'rgba(255,255,255,.12)',
4771+
'rgba(255,255,256,0.1)',
4772+
'rgb(4,4,5%)',
4773+
'rgba(5%,5%,5%)',
4774+
'rgba(3,3,3%,.3)',
4775+
'rgb(101%,101%,101%)',
4776+
'rgba(3%,3%,101%,0.3)',
4777+
'r g b( 0, 251, 222 )',
4778+
'r g ba( 0, 251, 222 )',
4779+
'rg ba(0, 251, 22, 0.5)',
4780+
'rgb( 255,255 ,255)',
4781+
'rgba(255, 255, 255, 0.5)',
4782+
'rgba(255, 255, 255, 0.5)',
4783+
'rgb(5%, 5%, 5%)',
4784+
],
4785+
});
47424786
// test where includePercentValues is given as false
47434787
test({
47444788
validator: 'isRgbColor',
@@ -4750,6 +4794,159 @@ describe('Validators', () => {
47504794
invalid: [
47514795
'rgb(4,4,5%)',
47524796
'rgba(5%,5%,5%)',
4797+
'r g b( 0, 251, 222 )',
4798+
'r g ba( 0, 251, 222 )',
4799+
],
4800+
});
4801+
4802+
// test where includePercentValues is given as false as part of options object
4803+
test({
4804+
validator: 'isRgbColor',
4805+
args: [{ includePercentValues: false }],
4806+
valid: [
4807+
'rgb(5,5,5)',
4808+
'rgba(5,5,5,.3)',
4809+
],
4810+
invalid: [
4811+
'rgb(4,4,5%)',
4812+
'rgba(5%,5%,5%)',
4813+
'r g b( 0, 251, 222 )',
4814+
'rgba(255, 255, 255 ,0.2)',
4815+
'r g ba( 0, 251, 222 )',
4816+
],
4817+
});
4818+
4819+
// test where include percent is true explciitly
4820+
test({
4821+
validator: 'isRgbColor',
4822+
args: [true],
4823+
valid: [
4824+
'rgb(5,5,5)',
4825+
'rgba(5,5,5,.3)',
4826+
'rgb(0,0,0)',
4827+
'rgb(255,255,255)',
4828+
'rgba(0,0,0,0)',
4829+
'rgba(255,255,255,1)',
4830+
'rgba(255,255,255,.1)',
4831+
'rgba(255,255,255,0.1)',
4832+
'rgb(5%,5%,5%)',
4833+
'rgba(5%,5%,5%,.3)',
4834+
'rgb(5%,5%,5%)',
4835+
'rgba(255,255,255,0.5)',
4836+
],
4837+
invalid: [
4838+
'rgba(255, 255, 255, 0.5)',
4839+
'rgb(5%, 5%, 5%)',
4840+
'rgb(4,4,5%)',
4841+
'rgba(5%,5%,5%)',
4842+
'r g b( 0, 251, 222 )',
4843+
'r g ba( 0, 251, 222 )',
4844+
'rgb(0,0,0,)',
4845+
'rgb(0,0,)',
4846+
'rgb(0,0,256)',
4847+
'rgb()',
4848+
'rgba(0,0,0)',
4849+
'rgba(255,255,255,2)',
4850+
'rgba(255,255,255,.12)',
4851+
'rgba(255,255,256,0.1)',
4852+
'rgb(4,4,5%)',
4853+
'rgba(5%,5%,5%)',
4854+
'rgba(3,3,3%,.3)',
4855+
'rgb(101%,101%,101%)',
4856+
'rgba(3%,3%,101%,0.3)',
4857+
],
4858+
});
4859+
4860+
// test where percent value is false and allowSpaces is true as part of options object
4861+
test({
4862+
validator: 'isRgbColor',
4863+
args: [{ includePercentValues: false, allowSpaces: true }],
4864+
valid: [
4865+
'rgb(5,5,5)',
4866+
'rgba(5,5,5,.3)',
4867+
'rgba(255,255,255,0.2)',
4868+
'rgba(255, 255, 255 ,0.2)',
4869+
],
4870+
invalid: [
4871+
'rgb(4,4,5%)',
4872+
'rgba(5%,5%,5%)',
4873+
'rgba(5% ,5%, 5%)',
4874+
'r g b( 0, 251, 222 )',
4875+
'r g ba( 0, 251, 222 )',
4876+
'rgb(0,0,)',
4877+
'rgb()',
4878+
'rgb(4,4,5%)',
4879+
'rgb(5%,5%,5%)',
4880+
'rgba(3,3,3%,.3)',
4881+
'rgb(101%, 101%, 101%)',
4882+
'rgba(3%,3%,101%,0.3)',
4883+
],
4884+
4885+
});
4886+
4887+
// test where both are true as part of options object
4888+
test({
4889+
validator: 'isRgbColor',
4890+
args: [{ includePercentValues: true, allowSpaces: true }],
4891+
valid: [
4892+
'rgb( 5, 5, 5)',
4893+
'rgba(5, 5, 5, .3)',
4894+
'rgb(0, 0, 0)',
4895+
'rgb(255, 255, 255)',
4896+
'rgba(0, 0, 0, 0)',
4897+
'rgba(255, 255, 255, 1)',
4898+
'rgba(255, 255, 255, .1)',
4899+
'rgba(255, 255, 255, 0.1)',
4900+
'rgb(5% ,5% ,5%)',
4901+
'rgba(5%,5%,5%, .3)',
4902+
],
4903+
invalid: [
4904+
'r g b( 0, 251, 222 )',
4905+
'rgb(4,4,5%)',
4906+
'rgb(101%,101%,101%)',
4907+
4908+
],
4909+
});
4910+
4911+
// test where allowSpaces is false as part of options object
4912+
test({
4913+
validator: 'isRgbColor',
4914+
args: [{ includePercentValues: true, allowSpaces: false }],
4915+
valid: [
4916+
'rgb(5,5,5)',
4917+
'rgba(5,5,5,.3)',
4918+
'rgb(0,0,0)',
4919+
'rgb(255,255,255)',
4920+
'rgba(0,0,0,0)',
4921+
'rgba(255,255,255,1)',
4922+
'rgba(255,255,255,.1)',
4923+
'rgba(255,255,255,0.1)',
4924+
'rgb(5%,5%,5%)',
4925+
'rgba(5%,5%,5%,.3)',
4926+
4927+
],
4928+
invalid: [
4929+
'rgb( 255,255 ,255)',
4930+
'rgba(255, 255, 255, 0.5)',
4931+
'rgb(5%, 5%, 5%)',
4932+
'rgba(255, 255, 255, 0.5)',
4933+
'rgb(4,4,5%)',
4934+
'rgba(5%,5%,5%)',
4935+
'r g b( 0, 251, 222 )',
4936+
'r g ba( 0, 251, 222 )',
4937+
'rgb(0,0,0,)',
4938+
'rgb(0,0,)',
4939+
'rgb(0,0,256)',
4940+
'rgb()',
4941+
'rgba(0,0,0)',
4942+
'rgba(255,255,255,2)',
4943+
'rgba(255,255,255,.12)',
4944+
'rgba(255,255,256,0.1)',
4945+
'rgb(4,4,5%)',
4946+
'rgba(5%,5%,5%)',
4947+
'rgba(3,3,3%,.3)',
4948+
'rgb(101%,101%,101%)',
4949+
'rgba(3%,3%,101%,0.3)',
47534950
],
47544951
});
47554952
});

0 commit comments

Comments
 (0)