在多个事件中突出显示字符串

我目前正在实施子字符串搜索。从算法中，我得到了每个元素的形式为[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

在多个事件中突出显示字符串

回答

相关问题