Разбить все входы формы на двоеточие и перенести в span

Question

Я борюсь с тем, как лучше всего это сделать, и надеюсь на несколько советов.

Для всех входов в этой форме мне нужно разделить метку на двоеточие (:) и обернуть промежуток вокруг второй половины метки, чтобы достичь чего-то вроде этого: <label>Regular: <span class="price">$135 (1 Year) or $225 (2 Year)</span></label>,

Будет ли RegEx лучшим путем для этого?Я не уверен, как это сделать, это немного сложнее, чем мои знания о RegEx.

<div class="form-item webform-component webform-component-radios" id="webform-component-discount-options">

<div id="edit-submitted-discount-options" class="form-radios">

<div class="form-item form-type-radio form-item-submitted-discount-options">
   <input type="radio" id="edit-submitted-discount-options-1" name="submitted[discount_options]" value="none" class="form-radio">
      <label class="option" for="edit-submitted-discount-options-1">Regular: $135 (1 Year) or $225 (2 Year) </label>
</div>

<div class="form-item form-type-radio form-item-submitted-discount-options">
 <input type="radio" id="edit-submitted-discount-options-2" name="submitted[discount_options]" value="senior" class="form-radio">
      <label class="option" for="edit-submitted-discount-options-2">Senior: $108 (1 Year) or $180 (2 Year) </label>

</div>
<div class="form-item form-type-radio form-item-submitted-discount-options">
   <input type="radio" id="edit-submitted-discount-options-3" name="submitted[discount_options]" value="student" class="form-radio">
      <label class="option" for="edit-submitted-discount-options-3">Student: $81 (1 Year) </label>
</div>

<div class="form-item form-type-radio form-item-submitted-discount-options">
   <input type="radio" id="edit-submitted-discount-options-4" name="submitted[discount_options]" value="nonresident" class="form-radio">
      <label class="option" for="edit-submitted-discount-options-4">Non-Resident: $108 (1 Year) or $180 (2 Year) </label>
</div>

</div>
</div>

Answer 1

Полагаю, вам просто любопытно, как автоматизировать это как задачу редактирования (ту, которая кажется повторяемой вручную в вашем редакторе кода).

Даже если этодостаточно просто сделать это вручную для 4 входов, вместо этого вы могли бы сделать это и с помощью регулярного выражения.

Регулярное выражение, подобное /(?<=: )[^<]+/gm;, может помочь в поиске и замене описанным вами способом.Например, запустите фрагмент кода ниже:

let html = `<div class="form-item webform-component webform-component-radios" id="webform-component-discount-options">

<div id="edit-submitted-discount-options" class="form-radios">

<div class="form-item form-type-radio form-item-submitted-discount-options">
   <input type="radio" id="edit-submitted-discount-options-1" name="submitted[discount_options]" value="none" class="form-radio">
      <label class="option" for="edit-submitted-discount-options-1">Regular: $135 (1 Year) or $225 (2 Year) </label>
</div>

<div class="form-item form-type-radio form-item-submitted-discount-options">
 <input type="radio" id="edit-submitted-discount-options-2" name="submitted[discount_options]" value="senior" class="form-radio">
      <label class="option" for="edit-submitted-discount-options-2">Senior: $108 (1 Year) or $180 (2 Year) </label>

</div>
<div class="form-item form-type-radio form-item-submitted-discount-options">
   <input type="radio" id="edit-submitted-discount-options-3" name="submitted[discount_options]" value="student" class="form-radio">
      <label class="option" for="edit-submitted-discount-options-3">Student: $81 (1 Year) </label>
</div>

<div class="form-item form-type-radio form-item-submitted-discount-options">
   <input type="radio" id="edit-submitted-discount-options-4" name="submitted[discount_options]" value="nonresident" class="form-radio">
      <label class="option" for="edit-submitted-discount-options-4">Non-Resident: $108 (1 Year) or $180 (2 Year) </label>
</div>

</div>
</div>`;

let rx = /(?<=: )[^<]+/gm;

html = html.replace(rx,`<span class="price">$&</span>`);
console.log(html);

Answer 2

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

$("label.option").each(function(x) {
  if($(this).children().length == 0) {
    var t = $(this).text();
    var r = t.replace(/(.*?:\s*)(.*?)\s*$/, '$1<span>$2</span>');
    $(this).html(r);
    console.log(r)
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-item webform-component webform-component-radios" id="webform-component-discount-options">

<div id="edit-submitted-discount-options" class="form-radios">

<div class="form-item form-type-radio form-item-submitted-discount-options">
   <input type="radio" id="edit-submitted-discount-options-1" name="submitted[discount_options]" value="none" class="form-radio">
      <label class="option" for="edit-submitted-discount-options-1">Regular: $135 (1 Year) or $225 (2 Year) </label>
</div>

<div class="form-item form-type-radio form-item-submitted-discount-options">
 <input type="radio" id="edit-submitted-discount-options-2" name="submitted[discount_options]" value="senior" class="form-radio">
      <label class="option" for="edit-submitted-discount-options-2">Senior: $108 (1 Year) or $180 (2 Year) </label>

</div>
<div class="form-item form-type-radio form-item-submitted-discount-options">
   <input type="radio" id="edit-submitted-discount-options-3" name="submitted[discount_options]" value="student" class="form-radio">
      <label class="option" for="edit-submitted-discount-options-3">Student: $81 (1 Year) </label>
</div>

<div class="form-item form-type-radio form-item-submitted-discount-options">
   <input type="radio" id="edit-submitted-discount-options-4" name="submitted[discount_options]" value="nonresident" class="form-radio">
      <label class="option" for="edit-submitted-discount-options-4">Non-Resident: $108 (1 Year) or $180 (2 Year) </label>
</div>

</div>
</div>

Answer 3

Обычно плохо анализировать HTML с помощью Regex.

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

При этом, если вы знаете, что ваши <label> теги находятся только в одной строке, все они правильно отформатированы, и вы действительно решив использовать регулярное выражение, это поможет:

<label.*?>.*?:(.*?)<\/label>

Он получает открывающий тег label, читает первый экземпляр двоеточия и затем захватывает все последо тех пор, пока он не достигнет метки закрытия ярлыка. См. Демонстрацию здесь.

Это работает только для опубликованных вами примеров. Если после метки есть другой атрибут или у вас есть вложенные теги метки (по какой-то причине)или где-нибудь еще в метке появляется двоеточие, регулярное выражение разрушается.Если вы уже работаете в JS, возможно, гораздо лучше использовать element.innerText, чтобы получить текст, а затем изменить его таким образом.