用Javascript突出显示文字

Question

Problem

Suppose that in the backend of my Web application I have a generic string of letters:

seq = AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

and an array of positions in such a string:

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

I need to render this sequence in the frontend by splitting it every n characters. Then when a user clicks a button I need to highlight the sequence between two parameters (taken from pos ) for which the button refers to.

My solution

I solve this by implementing a Javascript function formatSequence which splits seq every n characters and iterates through the pos array in order to wrap each substring inside a span tag. The result is something like this:

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

When the user clicks the button referring to the class A I simply change the CSS background rule for class A .

It works :) But the function formatSequence is way too complicated imho. It was a pain dealing with multiple lines. I prefer not posting the code since I am looking for other approaches not changing the code of such function.

A better solution?

I think that a (better?) solution would be to implement a function that given two parameters start and end it dynamically highlights the text between them. But it appears to be even more complicated than the previous one (remember that the sequence must be split every n characters and thus the highlight must be multilines).

Any suggestions? Better approach to solve this?

Answer 1

One simple solution would be just to print the full seq multiple times into the HTML and hide every row you don't need at the time. When a user clicks on a button, another row would be displayed (and the first one would be hidden).

HTML:

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

JavaScript (depending on 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;
}

Here is a jsFiddle: https://jsfiddle.net/y8uoou1L/2