Actualmente no sé cómo podría usar correctamente la etiqueta en mi HTML como variables para mi JS.

 [HTML] <div> <!--Main Toppings--> <label for = "mtop"> Main Toppings: </label> <select name="mainToppings" id = "toppingsoption" required> <option disabled selected id = 'emptyoption'> -- select an option -- </option> <option id='pepperoniOverload' class = "mtopchoice">Pepperoni Overload - &#8369 100</option> <option id='hawaiian' class = "mtopchoice">Hawaiian - &#8369 50</option> <option id='meatOverload' class = "mtopchoice">Meat Overload - &#8369 125</option> </select> </div> [JavaScript] var toppings = document.getElementById("toppingsoption"); if (toppings.options[toppings.selectedIndex].id == 'emptyoption') { var toppingsName = ''; var toppingsValue = 0; } else { var toppingsText = toppings.options[toppings.selectedIndex].innerHTML; var toppingsName = toppingsText.replace(/[^az]/gi, ''); var toppingsValue = parseInt(toppingsText.replace(/\D/g,'')); console.log(toppingsName, toppingsValue, "getMainToppings() working"); }

Si bien el código actual funciona bien para lidiar con la opción 'Hawaiana', 'Sobrecarga de pepperoni' y 'Sobrecarga de carne' interfieren con la forma en que extraigo el texto de las etiquetas. ¿Cuál sería la forma correcta de poder extraer las palabras Pepperoni Overload y Meat Overload, manteniendo el espacio entre palabras pero sin extraer los espacios adicionales que siguen después?