将AJAX返回的HTML转换为select标签的option选项

需求：将AJAX调用后获取的HTML内容转换为option选项并追加到指定select标签中。

AJAX返回的HTML结构 #

<div class="views-element-container">
  <div class="view view-contact-view-id-contact view-display-id-page_2 js-view-dom-id">      
     <div class="view-content">
        1009abc example    1008xyz example 12564abc cdfg &amp; TOT arrangement
     </div>  
  </div>
</div>

期望输出 #

<option value="1009">abc example </option>
<option value="1008">xyz example </option>
<option value="12564">abc cdfg &amp; TOT arrangement</option>

原代码问题 #

当前使用的Drupal AJAX执行代码无法正确处理第三个选项的长文本：

var contact_us_response = Drupal.ajax(elementSettings).execute();
contact_us_response.done(function(msg){
$(".ajax-progress.ajax-progress-fullscreen").remove();  
$('.contact_us_sub_cat_list').append('<option value="">Please Select</option>');
var content = $.trim($(msg[1].data).find('.view-content').text());
var arr = content.match(/(\d+)(\w+)\s+(\w+)/g);
  $.each(arr,function(index, value){
     var array = value.match(/\D+|\d+/g);
     $('.contact_us_sub_cat_list').append('<option value="'+array[0]+'">'+array[1]+'</option>');
  });       
});

原代码的核心问题是正则表达式/(\d+)(\w+)\s+(\w+)/g只能匹配固定格式的短文本（数字+单词+空格+单词），无法覆盖包含特殊字符、多空格、多个单词的长文本内容，导致第三个条目无法被正确匹配和解析。

修正后的代码 #

var contact_us_response = Drupal.ajax(elementSettings).execute();
contact_us_response.done(function(msg){
  $(".ajax-progress.ajax-progress-fullscreen").remove();  
  var $select = $('.contact_us_sub_cat_list');
  // 清空原有选项（可选，避免重复追加）
  $select.empty();
  $select.append('<option value="">Please Select</option>');
  
  var content = $.trim($(msg[1].data).find('.view-content').text());
  // 按数字开头分割每个条目，正向预查确保分割点在数字前
  var items = content.split(/(?=\d+)/).filter(item => $.trim(item) !== '');
  
  $.each(items, function(index, item){
    // 提取数字value和对应的文本内容
    var match = item.match(/^(\d+)(.*)/);
    if (match) {
      var value = $.trim(match[1]);
      var text = $.trim(match[2]);
      $select.append(`<option value="${value}">${text}</option>`);
    }
  });       
});

关键修改说明 #

• 分割逻辑优化：使用split(/(?=\d+)/)将原始文本分割为多个以数字开头的独立条目，解决多空格、长文本的分割问题，同时过滤空条目避免无效处理。
• 正则匹配优化：用/^(\d+)(.*)/匹配每个条目，提取开头的数字作为option的value，剩余所有内容作为option的显示文本，兼容包含特殊字符、多单词的长文本。
• DOM操作优化：先缓存select元素，减少重复DOM查询，同时可选清空原有选项避免重复追加（根据业务需求调整）。

内容的提问来源于stack exchange，提问作者Rahul Dravid