Jquery найти первые 3 слова и изменить стили

149

30 января 2020, 20:00

Есть много строк с примерно следующим содержанием:

Иванова Мария Сергеевна здание 1 кабинет 20

Как найти во всех строках первые три слова и установить стиль текста жирный?

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

$(document).ready(function(){
    var user_str = $(".option-user").text();
    var user_parse = user_str.split(' ', 3);
});

Answer 1

вы уже почти все сделали, я предлагаю первые 3 слова обернуть в тег b

$(document).ready(function() { 
  $('.option-user').each(function() { 
    var user = $(this); 
    var userStr = user.text() || ''; 
    var userParse = userStr.split(' ').map(function(str, index) { 
      if (index > 2) return str; 
      return '<b>' + str + '</b>'; 
    }); 
    user.html(userParse.join(' ')); 
  }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="option-user">Иванова Мария Сергеевна здание 1 кабинет 20</div> 
<div class="option-user">Иванова Мария Сергеевна здание 2 кабинет 20</div> 
<div class="option-user">Иванова Мария Сергеевна здание 3 кабинет 20</div> 
<div class="option-user">Иванова Мария Сергеевна здание 4 кабинет 20</div>

для селекта Да, вы правы

опция select'a,а как вы знаете теги внутри селекта не работают

но в вопросе о том что это select ничего не сказано

для того чтобы кастомизировать select обычно используют обертки из дивов, спанов и жс, если лень писать самому, то можно воcпользоваться готовым решением, например select2

$(document).ready(function() { 
  var generateTemplate = function(state) { 
    var userParse = state.text.split(' ').map(function(str, index) { 
      if (index > 2) return str; 
      return '<b>' + str + '</b>'; 
    }); 
    return $('<div>' + userParse.join(' ') + '</div>'); 
  }; 
  $('select').select2({ 
    templateResult: generateTemplate, 
    templateSelection: generateTemplate 
  }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> 
<select> 
  <option class="option-user">Иванова Мария Сергеевна здание 1 кабинет 20</option> 
  <option class="option-user">Иванова Мария Сергеевна здание 2 кабинет 20</option> 
  <option class="option-user">Иванова Мария Сергеевна здание 3 кабинет 20</option> 
  <option class="option-user">Иванова Мария Сергеевна здание 4 кабинет 20</option> 
</select>

Answer 2

Показалось, что тут jQuery лишнее, на чистом JS это можно организовать так:

ДЕМО (JsFiddle)

(function(){
   const x = document.getElementsByClassName('option-user');
   for(let i = 0; i < x.length; i++){
     x[i].innerHTML = '<b>' + x[i].innerHTML.replace(/(\S+\s+\S+\s+\S+)/i,'$1</b>');
   }
})();

(function(){...})(); — это JS-аналог $(document).ready(function(){...}); Получаем все нужные нам элементы по классу и запускаем цикл, который кругами будет выполнять поставленную задачу для каждого класса, в зависимости от кол-ва найденных классов.

.replace(/(\S+\s+\S+\s+\S+)/i,'$1</b>') — Вот эта вот страшная штука, не такая уж страшная... \S+ - находит вообще всё, что не является пробелом (слово, число, любые другие символы без пробелов). А вот маленькая \s+ - находит пробел - один или несколько подряд. И в итоге всё это выражение переводится как (слово пробел слово пробел слово)

Ну допустим выделили нужный нам диапазон слов. Всё выражение берется в скобки, чтобы далее ссылаться на него через ключевой символ $1 (если бы там была вторая скобка, это была бы $2 и т.п.). В итоге... получается, что берем выражение и заменяем его на самого себя ($1), добавив закрывающий тег </b>

P.s. const и let тоже не кусаются... это почти те же var