Question

我目前正在实施子字符串搜索。从算法中，我得到子串出现位置的数组，其中每个元素的形式为[startPos, endPos]。

例如（在javascript数组中）：

[[1,3], [8,10], [15,18]]

要突出显示的字符串是：

ACGATCGATCGGATCGAGCGATCGAGCGATCGAT

我想突出显示（在HTML中使用<b>）原始字符串，因此它会突出显示或加粗字符串从位置1到3，然后是8到10，然后是15到18等等（0索引））。

A<b>CGA</b>TCGA<b>TCG</b>GATC<b>GAGC</b>GATCGAGCGATCGAT

这就是我尝试过的（JavaScript）：

function hilightAtPositions(text, posArray) {

    var startPos, endPos;

    var startTag = "<b>";
    var endTag   = "</b>";
    var hilightedText = "";

    for (var i = 0; i < posArray.length; i++) {
        startPos = posArray[i][0];
        endPos   = posArray[i][1];

        hilightedText = [text.slice(0, startPos), startTag, text.slice(startPos, endPos), endTag, text.slice(endPos)].join(''); 
    }

    return hilightedText;

}

但它突出了posArray的一个范围（我知道它仍然不正确）。那么，如何突出显示多个出现位置的字符串？感谢。

Answer 1

关注this question，并遵循John3136关于从头到尾的建议，你可以这样做：

String.prototype.splice = function( idx, rem, s ) {
    return (this.slice(0,idx) + s + this.slice(idx + Math.abs(rem)));
};

function hilightAtPositions(text, posArray) {
    var startPos, endPos;
    posArray = posArray.sort(function(a,b){ return a[0] - b[0];});

    for (var i = posArray.length-1; i >= 0; i--) {
        startPos = posArray[i][0];
        endPos   = posArray[i][1];
        text= text.splice(endPos, 0, "</b>"); 
        text= text.splice(startPos, 0, "<b>"); 
    }
    return text;
}

请注意，在您的代码中，每次迭代都会覆盖hilightedText，从而丢失您的更改。

Answer 2

试试这个：

var stringToHighlight = "ACGATCGATCGGATCGAGCGATCGAGCGATCGAT";    
var highlightPositions = [[1,3], [8,10], [15,18]];

var lengthDelta = 0;

for (var highlight in highlightPositions) {
    var start = highlightPositions[highlight][0] + lengthDelta;
    var end = highlightPositions[highlight][1] + lengthDelta;

    var first = stringToHighlight.substring(0, start);
    var second = stringToHighlight.substring(start, end + 1);
    var third = stringToHighlight.substring(end + 1);

    stringToHighlight = first + "<b>" + second + "</b>" + third;
    lengthDelta += ("<b></b>").length;
}

alert(stringToHighlight);

演示：http://jsfiddle.net/kPkk3/

Answer 3

假设您的细分列表是从最低开始到最高开始排序，请尝试从最后到第一个进行数组。

这样你就不会改变你尚未到达的部分字符串。只需将循环更改为：

 for (var i = posArray.length-1; i >=0; i--) {

Answer 4

假设您正在尝试突出显示搜索字词或类似内容。为什么不用粗体代替术语？

示例：

术语：abc

var text = 'abcdefgabcqq';
var term = 'abc';
text.replace(term, '<b>' + term + '</b>');

这可以让你避免担心职位，假设你试图突出显示一个特定的字符串。

多次突出显示字符串

4 个答案: