Question

问题

假设在我的Web应用程序的后端中，我有一个通用的字母串：

seq = AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

以及这样一个字符串中的一系列位置：

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

我需要通过将每个n个字符分开来在前端渲染此序列。然后，当用户单击按钮时，我需要突出显示按钮所引用的两个参数（取自pos）之间的序列。

我的解决方案

我通过实现一个Javascript函数formatSequence来解决这个问题，该函数将每个seq字符拆分n并遍历pos数组，以便将每个子字符串包装在{{1}内1}}标签。结果是这样的：

span

当用户点击引用课程<pre> AAAAA AAAAA AAAAA </pre>的按钮时，我只需更改课程A的CSS后台规则。

它有效:)但函数A太复杂了。这是一个处理多行的痛苦。我不想发布代码，因为我正在寻找其他不改变此类函数代码的方法。

更好的解决方案？

我认为（更好的？）解决方案是实现一个给出两个参数formatSequence和start的函数，它会动态突出显示它们之间的文本。但它似乎比前一个更复杂（请记住，序列必须每end个字符拆分，因此突出显示必须是多行的。）

有什么建议吗？更好的方法来解决这个问题？

Answer 1

一个简单的解决方案就是将完整的BackgroundTasks.ExampleTask多次打印到HTML中，并隐藏当时不需要的每一行。当用户点击按钮时，将显示另一行（并且第一行将被隐藏）。

HTML：

seq

JavaScript（取决于jQuery）：

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

CSS：

(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();
    });

})();

这是一个jsFiddle：https://jsfiddle.net/y8uoou1L/2

使用Javascript突出显示文本切片

1 个答案: