複数の出現時の文字列の強調表示

Question

現在、部分文字列検索を実装しています。このアルゴリズムから、各要素が[startPos, endPos]の形式であるサブストリングの出現位置の配列を得る。

例えば（javascript配列で）​​：

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

とハイライトする文字列は次のとおりです。

ACGATCGATCGGATCGAGCGATCGAGCGATCGAT 

は、私は元の文字列を（<b>を使用してHTMLに）ハイライトしたい、それがするので、 1〜3位、8〜10位、15〜18位などの文字列をハイライトまたは太字で表示します（0で索引付けされます）。

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からわずか範囲を強調（と私はそれはまだ、まだ間違っている知っている）：

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

これは私が（JavaScriptを）試してみましたものです。だから、どのように occurences positionの文字列を強調表示できますか？ありがとう。

Answer 1

this questionを見てみると、頭に尾から行くのJohn3136の提案以下、あなたができる：あなたのコードでは、あなたの変更を失う、各反復でhilightedTextを上書きしていることを

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

注意。

Answer 2

セグメントのリストが最低の開始から最高の順に並べられていると仮定して、最後から最初に配列を実行してみてください。

これで、まだ到達していない文字列の部分は変更されません。あなたがそのような検索語か何かを強調しようとしていると仮定すると、

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

Answer 3

： だけにループを変更します。なぜ言葉を太字で置き換えてみませんか？

例：

用語：ABC

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

これは、あなたが特定の文字列を強調しようとしていると仮定して、あなたがポジションを心配避けることが可能になります。

Answer 4

これを試してみてください：

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/