CODEWITHSUNDEEP
javascriptprototype
user2813308004
user2813308004

Reputation: 13

How can I remove text and create class from its value with Prototype?

I want to remove from the option text the double bracketed items and take the innertext inside the double brackets and create a class in each option with the value. How would you do this in Prototype?

<select id="attribute969">     
<option value="">Choose an Option...</option>
<option value="340">White [[white]]</option>
<option value="341">White [[white]]</option>
<option value="342">Blue PMS 801 [[pms801]]</option>
<option value="343">Blue PMS 801 [[pms801]]</option>
</select>

Example Below:

<select id="attribute969">     
<option value="">Choose an Option...</option>
<option value="340" class="white">White</option>
<option value="341" class="white">White</option>
<option value="342" class="pms801">Blue PMS 801</option>
<option value="343" class="pms801">Blue PMS 801</option>
</select>

Upvotes: 1

Views: 269

Answers (4)

ListenSoftware Louise Ai Agent
ListenSoftware Louise Ai Agent

Reputation: 4253

you can use a regular expression to extract the [[ contents ]]. I use a nongreedy expression .*? to get the contents. The pattern generates three groups with index value 0,1,2 and where index 2 is the class and index 0 is the value and 1 is the text content between and . Using the groups you can reconstruct the option value content.

 data="""<select id="attribute969">     
 <option value="">Choose an Option...</option>
 <option value="340">White [[white]]</option>
 <option value="341">White [[white]]</option>
 <option value="342">Blue PMS 801 [[pms801]]</option>
 <option value="343">Blue PMS 801 [[pms801]]</option>
 </select>"""

 options = re.findall(r'<option value="(\w*)">(.*?(\[\[.*?\]\])*)</option>',data)
                 
for option in options:
    opt_value=option[0]
    opt_content=re.sub(r'(\[\[.*?\]\])*','',option[1])
    opt_class=option[2].replace('[','').replace(']','')
    if len(opt_class)>0:                                                    
        print("<option value='{opt_value}' class='{opt_class}'>{opt_content}</option>".format(opt_value=opt_value,opt_class=opt_class,opt_content=opt_content))
    else:
        print("<option value='{opt_value}'>{opt_content}</option>".format(opt_value=opt_value,opt_content=opt_content))

output

<option value=''>Choose an Option...</option>
<option value='340' class='white'>White </option>
<option value='341' class='white'>White </option>
<option value='342' class='pms801'>Blue PMS 801 </option>
<option value='343' class='pms801'>Blue PMS 801 </option>

Upvotes: 0

JWL
JWL

Reputation: 14211

//Here is my brief and killer trial, the way to do it with Prototype's Power!
$A($('attribute969').options).each(function(s,index)
{
   $(s).toggleClassName($(s).innerHTML.gsub(/.*\[{2}/,'').gsub(/\]{2}.*/,''));
   $(s).innerHTML = $(s).innerHTML.gsub(/\[{2}.*/,'');
});

Check this code snippet in action live here...

Upvotes: 0

Madison Williams
Madison Williams

Reputation: 350

(function() {
    var bracketregex = /\[\[(.*)\]\]/m,
        oBracks;
    $$("#attribute969 option").each(function(option) {
        oBracks = bracketregex.exec(option.innerHTML);
        if (oBracks) {
            option.addClassName(oBracks[1]);
            option.innerHTML = option.innerHTML.gsub(oBracks[0],"")
        }
    })
}())

The regex might need some work, but that should do what you want it to.

Upvotes: 1

JoJo
JoJo

Reputation: 20115

Untested, but you get the idea...

$('attributes969').childElements().each(
 function(option) {
  if (/\[\[(.*?)\]\]/.test(option.innerHTML)) {
   option.addClassName(option.match(/\[\[(.*?)\]\]/)[1]);
   option.update(option.innerHTML.replace(/\[\[(.*?)\]\]/, ''));
  }
 }
);

Upvotes: 0

Related Questions