JS RegEx to return a hyphenated word and then another word/value

Question

I'm having some RegEx trouble, but I am aiming for this snippet of code to read an input such as "background-colour:red;" , validate the syntax, then take "background-colour" and "red" into an array. It currently returns ["background-colour"] , but not red, and I've spent around an hour to try and figure it out. Could anyone help or point me in the right direction? I've managed to get simple ones like "opacity:1;" and "colour:red;" to work but the hyphen has thrown a wrench in it.

 let ed = document.getElementById("editor").innerText; 
 let dest = document.getElementById("destination");

//irrelevent code stripped here 

    regex3 = new RegExp(/^[a-zA-Z]+-[a-zA-Z]+:[a-zA-Z]+;$/i);
        
        //irrelevent code stripped here 

        else if (regex3.test(ed)) {
                    console.log("valid input");
                    let pattern = /\w+\-\w+/g;
        
                    let temp = ed.match(pattern);
                    console.log(temp);
        
                    let att = temp[0];
        
                    let quant = String(temp[1]);
        
                    console.log(att);
                    console.log(temp);
                    dest.style.setProperty(att, quant);
                    

Answer 1

Test with regex for validity and the use split() for getting property key and value in an array.

const regex = /^\w+(-\w+:\w+)?/

const input = 'background-colour:red'

const valid = regex.test(input)
let ouput = []
if(valid){
    ouput = input.split(":")
}
console.log(ouput)

Answer 2

You're using dest.style.setProperty in your example, so I'm assuming you're working with CSS properties. This method will get you the property and the value you need and works with any CSS value.

// test strings
const singleHyphenTest= 'background-color:red;';
const multipleHyphenTest = 'grid-template-columns:60px 60px;';
const noHyphenTest = 'color: red;';
const functionTest = 'width: calc(1rem + 20px);';
const customPropertyTest = 'background-color: var(--main-bg-color);';
const ANY_SYNTAX_WORKS = 'blablabla:stackoverflow;'

// either split the strings on : or ;
const pattern = /[:;]+/;
const singleGroup = singleHyphenTest.split(pattern);
const multipleGroup = multipleHyphenTest.split(pattern);
const noneGroup = noHyphenTest.split(pattern);
const functionGroup = functionTest.split(pattern);
const customGroup = customPropertyTest.split(pattern);
const anyGroup = ANY_SYNTAX_WORKS.split(pattern);

console.log(singleGroup);   // ['background-color', 'red', '']
console.log(multipleGroup); // ['grid-template-columns', '60px 60px', '']
console.log(noneGroup);     // ['color', ' red', '']
console.log(functionGroup); // ['width', ' calc(1rem + 20px)', '']
console.log(customGroup);   // ['background-color', ' var(--main-bg-color)', '']
console.log(anyGroup);      // ['blablabla', 'stackoverflow', '']

You can check if the CSS is 'valid' by checking if the array length is equal to 3:

const ed = 'background-color:red;'; 
const pattern = /[:;]+/; 
const groups = ed.split(pattern); 
if (3 === groups.length) {     
    const [cssProperty, cssValue] = groups;     
    console.log(cssProperty); // background-color  
    console.log(cssValue); // red

    // do your stuff here
    // dest.style.setProperty(cssProperty, cssValue);  
}

Again: this solution (and the regex in your example) does not validate the syntax! It only does some basic pattern matching. In order to validate the CSS syntax, you would have to do a lot more to catch all edge cases..