Выделите кусочки текста с Javascript

Question

Проблема

Предположим, что в бэкэндом моего веб-приложения у меня есть общие строки букв:

seq = AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 

и массив позиций в такой строка:

pos = [(0, 2), (4, 8)] 

Мне нужно визуализировать эту последовательность в интерфейсе путем разделения это каждые n символов. Затем, когда пользователь нажимает кнопку, мне нужно выделить последовательность между двумя параметрами (взятыми из pos), на которые ссылается кнопка.

Мое решение

Я решить эту проблему путем реализации функции formatSequence Javascript, который расщепляет seq каждые n символов и итерацию через pos массив, чтобы обернуть каждую подстроку внутри span тега. В результате получается нечто вроде этого:

<pre> 
    <span class="A">AA</span>AA<span class="B">A</span> 
    <span class="B">AAA</span>AA 
    AAAAA 
</pre> 

Когда пользователь нажимает на кнопку со ссылкой на класс A я просто изменить фоновое правило CSS для класса A.

Это работает :) Но функция formatSequence слишком сложна имхо. Это была боль, связанная с несколькими линиями. Я предпочитаю не публиковать код, так как я ищу другие подходы, не меняющие код такой функции.

Лучшее решение?

Я думаю, что (лучше?) Решение было бы реализовать функцию, заданную два параметра start и end динамически выделяет текст между ними. Но он кажется еще более сложным, чем предыдущий (помните, что последовательность должна быть разделена каждые n символов, и поэтому подсветка должна быть многострочной).

Любые предложения? Лучший подход для решения этой проблемы?

Answer 1

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

HTML:

<div class="rows"></div> 
<div class="buttons"></div> 

JavaScript (в зависимости от Jquery):

(function generateRowsAndButtons() { 
    var sequence = "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"; 
    var position = [ [0,2], [4,8] ]; 
    var $rows = $('.rows'); 
    var $buttons = $('.buttons'); 

    for(var i = 0; i < position.length; i++) { 
     if(position[i].length !== 2 || position[i][0] > position[i][1]) { 
      console.log("every position array needs exactly two values with the second larger than the first one"); 
      continue; 
     } 
     // the index is used for mapping the button the highlight position 
     var row = '<div class="row" data-index="' + i + '" style="display: none;">'; 

     // you should add some checks here, if position larger then the length of the string to avoid some misbehaviors. this is of course only necessary if you aren't validating the values on another place. 
     row += sequence.substring(0, position[i][0]); 
     row += '<span class="highlighted">'; 
     row += sequence.substring(position[i][0], position[i][1]); 
     row += '</span>'; 
     row += sequence.substring(position[i][1]); 
     row += '</div>'; 

     var $row = $(row); 
     $rows.append($row); 

     // a button needs the index to find the link the highlighted value 
     var $button = $('<button data-index="' + i + '">' + position[i] + '</button>'); 
     $buttons.append($button); 
    } 

    $buttons.find('button').click(function() { 
     var index = $(this).data('index'); 

     // hide every row, except the one with the correct index 
     $rows.find('.row').hide().filter('[data-index="' + index + '"]').show(); 
    }); 

})(); 

CSS:

.row .highlighted { 
    background: yellow; 
} 

Вот jsFiddle: https://jsfiddle.net/y8uoou1L/2