Блог

Главная - Вопросы по программированию - Как я могу удалить текст и создать класс из его значения с помощью Prototype?

Как я могу удалить текст и создать класс из его значения с помощью Prototype?

#javascript #prototype

#javascript #прототип

Вопрос:

Я хочу удалить из текста опции элементы, заключенные в двойные скобки, и поместить внутренний текст в двойные скобки и создать класс в каждой опции со значением. Как бы вы сделали это в 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>

Пример ниже:

 <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>

Ответ №1:

 (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],"")
        }
    })
}())

Возможно, потребуется некоторая доработка регулярного выражения, но это должно делать то, что вы хотите.

Ответ №2:

 //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}.*/,'');
});

Проверьте этот фрагмент кода в действии здесь …

Комментарии:

1. mcnemesis: предполагается ли, что эта строка удаляет заключенное в квадратные скобки значение из текста параметра? $(s).innerHTML = $(s).innerHTML.gsub(/[{2}.*/,'');

2. Я поиграл с вашим примером jsfiddle и вижу, что он удаляет [[pms801]] из опции, но в моем коде точно такой же код не удаляет текст, заключенный в квадратные скобки. Я использую версию prototype 1.6.0.3. Как вы думаете, это играет роль в этой проблеме?

3. да, он удаляет все от [[ до конца строки, затем устанавливает остаток в качестве нового параметра text / innerHTML.

4. да, версия прототипа, которую я использовал для тестирования, была 1.7. смотрите подробную скрипку здесь, вы можете переделать ее с помощью 1.6 — jsfiddle.net/mcnemesis/VW58q

5. аааа, я вижу, чего мне не хватало… документ.обратите внимание на «dom: загружен»

Ответ №3:

Непроверенный, но вы поняли идею…

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

Ответ №4:

вы можете использовать регулярное выражение для извлечения [[содержимого ]]. Я использую нестандартное выражение .*? чтобы получить содержимое. Шаблон генерирует три группы со значением индекса 0,1,2, где индекс 2 — это класс, индекс 0 — это значение, а 1 — текстовое содержимое между и . Используя группы, вы можете восстановить содержимое значения параметра.

  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))

вывод

 <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>