If you want to extract the colors from a string separated by dashes, you can hold the original string and then split it on the dashes. Each color can then be placed into its own span element and styled accordingly with the correct color.
It's worth noting that some of the colors may not match standard CSS colors, so this code snippet uses CSS variables to define them. The code then sets the variable value for each color entry.
Since the dashes are more of visual separators rather than actual characters in the list of colors, this snippet replaces them with pseudo after element content and padding. Depending on the desired end result, you may need to adjust this logic.
function getColors() {
if (!document.getElementById('colors_ava')) {
let colors_ava = document.createElement('div');
colors_ava.id = 'colors_ava';
document.body.appendChild(colors_ava);
let str = "Rich Navy - True Red - Dark Geen - Olive Drab Green - Patriot Blue";
let str2 = str.replace(/\s/g, ''); //remove spaces
let arr = str2.split('-'); //each color goes into an item of an array
let arr2 = str.split('-'); //colors with spaces intact
for (let i = 0; i < arr.length; i++) {
const span = document.createElement('span');
span.style.color = 'var(--' + arr[i] + ')';
span.innerText = arr2[i];
colors_ava.appendChild(span);
}
}
}
:root {
--RichNavy: #535E8D;
--TrueRed: red;
--DarkGreen: darkgreen;
--OliveDrabGreen: olivedrab;
--PatriotBlue: #343A57;
}
span::after {
content: '-';
padding: 0 1em;
color: black;
}
span:last-child::after {
content: '';
padding: 0;
}
<button onclick="getColors()">Colors Available</button>