文本換行的跨度標籤瞭解文本的開始和結束位置

所以我有以下的html：文本換行的跨度標籤瞭解文本的開始和結束位置

<div class="container"> some beautiful text here </div>

我要的是：

<div class="container"> some <span class="highlight">beautiful</span> text <span class="highlight">here</span>

我知道如何做到這一點知道字。感謝這個問題：How to highlight text using javascript 但我必須在特定位置突出顯示文本。我有一個字符串的開始和結束位置。我試圖通過開始和結束位置的這樣的列表迭代：

function highlight(divId, startPos, endPos) { 
    inputText = document.getElementById(divId); 
    var wholeText = inputText.innerText; 
    var inHTML = wholeText.substring(0, startPos) + "<span class='highlight'>" + wholeText.substring(startPos, endPos-1) + "</span> " + wholeText.substring(endPos, wholeText.length); 
    document.getElementById(divId).innerHTML = inHTML; 
} 


function highlightAll(fileA, fileB, JSONfile) { 
    var startPositionsA = extractStartPosA(JSONfile); 
    var endPositionsA = extractEndPosA(JSONfile); 
    var startPositionsB = extractStartPosB(JSONfile); 
    var endPositionsB = extractEndPosB(JSONfile); 

    for(var i=0; i < startPositionsA.length; i++) { 
    highlight("TextA", startPositionsA[i]-1, endPositionsA[i]); 
    } 

    for(var i=0; i < startPositionsB.length; i++) { 
    highlight("TextB", startPositionsB[i]-1, startPositionsB[i]); 
    } 
}

但每次迭代後的innerHTML被重新編寫的，所以最後我剛剛得到一個字突出 - 一個是最後一次迭代後離開。

任何人都可以幫我嗎？我沒有任何想法可以走得更遠。謝謝！

來源

2016-09-27 java

那麼不要覆蓋innerHTML，但添加到它......？ – CBroe

@CBroe你能給我一個提示，我該怎麼做？ – java

在添加標記後，索引始終發生變化... – java

如果YOUT獲得指定startPosition與終端位置的正確的位置，你可以創建一個包含高亮一個變種：

var highlightStart = "<span class='highlight'>"; 
var highlightEnd = "</span>";

剛剛在的位置到部分分割你的文字放在一起的部件，並在突出顯示瓦爾正確的順序

來源

2016-09-27 09:04:59 NotMyFaultSir

你的想法有助於解決問題！謝謝！ – java

很高興我可以幫忙 – NotMyFaultSir

這是你想要的嗎？

function highlight(id, start, end) { 
var html = document.getElementById(id).innerHTML; 
document.getElementById(id).innerHTML= [html.slice(0, start), '<span class="highlight">', html.slice(start, end), '</span>', html.slice(end)].join(''); 

}

來源

2016-09-27 09:10:24 Fif

好吧我有一個類似的功能，但我必須遍歷開始和結束位置的數組，因爲我有很多單詞，我必須突出顯示，並且每次我將這個函數調用 - 它只是重寫了innerHTML。 – java

文本換行的跨度標籤瞭解文本的開始和結束位置

回答

相關問題