Блог

Я хочу динамически переносить слова внутри < h1> с помощью < em>, используя jQuery с 2 переменными:

• Количество слов
• Начальная точка, как n-я, но внутри тега < h1>

У меня есть некоторые до сих пор:

  jQuery(document).ready(function($) {

        $('.my-heading h1').html(function (i, html) {
        return html.replace(/(w sw )/, '<em>$1</em>')   
        });

});
  

Этот код переносит первые два слова в < em> , но мне нужно, чтобы этот код был более переменным, чтобы я мог вставить количество слов, которые должны быть обернуты, и начальную точку. Например, он должен начинаться со слова под номером 4 и заключать 3 слова в < em> .

Есть идеи?

Для этого в javascript или jquery нет встроенных модулей, простым решением будет:

 var start = 2;
var count = 5;
$('h1').html(function(i, html){ 
    var words = $(this).text().split(' ');
    var final = '';
    for (var i = 0; i < start amp;amp; i < words.length; i  ) 
        final  = words[i]   ' ';
    final  = '<em>';
    for (; i < start   count amp;amp; i < words.length; i  )
        final  =  words[i]   ' ';
    final  = '</em>';
    for (; i < words.length - 1; i  )
        final  = words[i]   ' ';
    final  = words[words.length - 1];
    return final;
 });  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>The em element You have to hurry up! We cannot live like this.</h1>  

По сути, это — перебирать текст до start тех пор, пока не добавится '<em>' к конечному html, затем повторять до start count тех пор, пока не добавится '</em>' , затем повторять до конца строки.

Я создал функцию с рабочей демонстрационной скрипкой, которую вы можете использовать.

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

 function dynamicWrap(target, start_idx, words){
        // if a string target was given then convert it to a jQuery object
    if(typeof target === 'string'){
            target = $(target);
    }
    // make sure start_idx and words are numbers
    start_idx = start_idx * 1;
    words = words * 1;
    // loop thru each target element
    $.each(target, function(idx, ele){    
            var eleObj = $(ele);
        // split the text contents into an array of words
        var txtArr = eleObj.text().trim().split(/s /);        
        
        // These next two arrays will be used to store sections of the overall txtArr
        var beg = []; // these words are never wrapped
        var mid = []; // these words are always wrapped
        // and any remiaining in the txtArr will never be wrapped either
        
        
        if(start_idx === 0){            
            // pull out the words contained in the txtArr between index 0 and {words variable value}
          mid = txtArr.splice(0, words <= txtArr.length ? words : txtArr.length);          
        } else if(start_idx <= txtArr.length){          
          beg = txtArr.splice(0, start_idx <= txtArr.length ? start_idx : txtArr.length);
          mid = txtArr.splice(0, words <= txtArr.length ? words : txtArr.length);
        }
        
        eleObj.html( beg.join(' ')   ' <em>'   mid.join(' ')   '</em> '   txtArr.join(' '));
        
        
    });
}