Tengo un elemento <select> y elementos <option> .
En lugar de codificar el width a 90px , estoy buscando una manera de establecer el ancho para que se ajuste a una porción de expresiones regulares del contenido <option>
La expresión regular preferida sería LOREMIPSUM#\d{0,5}
En otras palabras,
max-width min-width de <select> se ajusten bien solo a la parte LOREUMIPSUM#?<select> se ajuste a todo el contenido, solo la primera parte de ese patrón de expresión regular. <select id="someId" name="someName" class="someClass" size="1" onchange="someMethod();" style="width:90px;"> <option value="a0D3u00000BhNCxEAN">LOREMIPSUM#0263 abcabcabcabcabcabcabcabcabcabcabcabc</option> <option value="a0D3u00000Bh7qFEAR">LOREMIPSUM#0262 user tests</option> <option value="a0D3u00000BgovaEAB">LOREMIPSUM#0258 dogs</option> <option value="a0D3u00000BgovVEAR">LOREMIPSUM#0257 cats</option> <option value="a0D3u00000BgovVEAR">LOREMIPSUM#10000 some text</option> </select>Creo que algo como lo siguiente podría funcionar. Sin probar
var myOpts = document.getElementById('someId').options; function biggestNumberInArray(arr) { const max = Math.max(...arr); return max; } var subTextLengths=[]; Array.from(document.querySelector("#someId").options).forEach(function(option_element) { let option_text = option_element.text; //let option_value = option_element.value; let regex = new RegExp('LOREMIPSUM#\d{0,5}'); let subText = regex.exec(option_text); let subTextLength = subText.length; subTextLengths.push(subTextLength); }); document.getElementById('someId').style.width = biggestNumberInArray(subTextLengths);