在多個事件中突出顯示字符串

我目前正在實施子字符串搜索。從算法中，我得到了每個元素的形式爲[startPos, endPos]的子串發生位置數組。在多個事件中突出顯示字符串

例如（在JavaScript數組）：

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

，並強調該字符串是：

ACGATCGATCGGATCGAGCGATCGAGCGATCGAT

我（使用<b>在HTML）原始字符串要突出，所以它會突出顯示或粗體顯示位置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範圍（我知道這仍是不正確還）。那麼，我該如何突出顯示一個字符串多個發生的位置？謝謝。

來源

2012-02-29 Muhammad Abrar

看着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每次迭代，失去更改。

來源

2012-02-29 04:31:18 Diego

不錯，它的工作原理。但是，是否有必要對posArray進行排序？因爲它保證了posArray的順序不斷增加。 – 2012-02-29 06:02:57

不，如果它已經排序，那麼你可以刪除'posArray = posArray.sort（function（a，b）{return a [0] - b [0];}）;'' – Diego 2012-02-29 16:57:57

假設您的分段列表從最低開始到最高排列，請嘗試從最後到最先排列數組。

這樣你就不會改變你還沒有到達的字符串部分。只要改變回路：

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

來源

2012-02-29 04:07:25 John3136

假設你想突出顯示搜索字詞或類似的東西。爲什麼不用粗體替換這個詞？

例如：

項：ABC

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

這將讓你避免擔心的位置，假設你是刻意突出一個特定的字符串。

來源

2012-02-29 04:21:13 Developer

沒有，我只有位置正好列表（段），並強調在那個位置。我沒有任何有關搜索條款的信息。 – 2012-02-29 04:26:57

那麼這個解決方案可能不是你想要的。對不起 – Developer 2012-02-29 04:30:22

試試這個：

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/

來源

2012-02-29 04:49:21 fardjad

在多個事件中突出顯示字符串

回答

相關問題