I have a <select> element, and <option> elements.
Rather than hardcoding the width to 90px, im looking for a way to set the width to fit a regex'd portion of the <option> contents
The preferred regex would be LOREMIPSUM#\d{0,5}
In other words,
max-width and min-width of the <select> to fit nicely around just the LOREUMIPSUM# part?<select> to fit all the content, just the first part by that regex pattern. <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>
i think something like the below might work. Untested.
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);