使用跨度動態突出顯示div內的多個單詞

Question

我想突出顯示（或「註釋」）div內的幾個單詞，並使用具有背景顏色的跨度。

在我的（最小）例子中，單詞「x」和「y」應該註釋（y的位置是37，x的位置是44）。然而，我的方法「annotateString」似乎並沒有工作，但我不知道爲什麼...

我的方法的想法是迭代div html內容以添加所需的跨度前綴或後綴位置。由於事實，我給出了基於字符串的位置，而不是可能由於之前的註釋修改了html內容，我希望位置指針「pos」凍結，如果它的內部是html元素（f.ex.已存在跨度）。

function annotateString(str, start, end, prefix, suffix) { 
 
    var annotatedString = ''; 
 
    var pos = -1; 
 
    var freeze = false; 
 
    if (str[0] == '<') { 
 
    freeze = true; 
 
    } 
 
    for (var i = 0; i < str.length; i++) { 
 
    if (!freeze && str[i] != '<') 
 
     pos++; 
 
    if (str[i] == '<') 
 
     freeze = true; 
 
    if (str[i] == '>') 
 
     freeze = false; 
 
    if (pos == start && !freeze) 
 
     annotatedString += prefix + str[i]; 
 
    else if (pos + 1 == end && !freeze) 
 
     annotatedString += str[i] + suffix; 
 
    else 
 
     annotatedString += str[i]; 
 
    } 
 
    return annotatedString; 
 
} 
 

 
$(function() { 
 
    var strOld = $("#item").html(); 
 
    var prefix = '<span style="background-color:yellow;">'; 
 
    var suffix = '</span>'; 
 

 
    // this should annotate the "y" 
 
    var strNew = annotateString(strOld, 37, 37, prefix, suffix); 
 
    $("#item").html(strNew); 
 

 
    // this should annotate the "x" 
 
    var strOld = $("#item").html(); 
 
    var strNew = annotateString(strOld, 44, 44, prefix, suffix); 
 
    $("#item").html(strNew); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="item">In this string I want to annotate "y" <- "x"</div>

Answer 1

有三個錯誤，我不得不警察與

• 你的HTML包含<，我跟<
• 的位置，其中一個有點古怪取代。
• 我不確定我是否得到了您的if (pos + 1 == end)，所以我結束了另一個解決方案，我認爲代碼是自我解釋！

function annotateString(str, start, end, prefix, suffix) { 
 
    var annotatedString = ''; 
 
    var pos = -1; 
 
    var freeze = false; 
 
    if (str[0] == '<') { 
 
    freeze = true; 
 
    } 
 
    for (var i = 0; i < str.length; i++) { 
 
    if (!freeze && str[i] != '<') 
 
     pos++; 
 
    if (str[i] == '<') 
 
     freeze = true; 
 
    if (str[i] == '>') 
 
     freeze = false; 
 
    // -------------------------------------- prefix on start 
 
    if (pos == start && !freeze) 
 
     annotatedString += prefix; 
 
    // --------------------------------------- content anyway 
 
    annotatedString += str[i]; 
 
    // ---------------------------------------- suffix on end 
 
    if (pos == end && !freeze) 
 
     annotatedString += suffix; 
 
     
 
    } 
 
    return annotatedString; 
 
} 
 

 
$(function() { 
 
    var strOld = $("#item").html(); 
 
    var prefix = '<span style="background-color:yellow;">'; 
 
    var suffix = '</span>'; 
 

 

 
    // this should annotate the "y" 
 
    var strNew = annotateString(strOld, 35, 35, prefix, suffix); 
 
    $("#item").html(strNew); 
 

 
    // this should annotate the "x" 
 
    strOld = $("#item").html(); 
 
    strNew = annotateString(strOld, 45, 45, prefix, suffix); 
 
    $("#item").html(strNew); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="item">In this string I want to annotate "y" &lt;- "x"</div>

而且你freeze變量的初始化爲true是沒有必要的，因爲你的性格<仔細檢查，但是這只是代碼審查