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

Question

我想使用具有背景顏色的跨度來突出顯示（或“注釋”）div中的幾個單詞。

在下面的（最小）示例中，應標注單詞“ x”和“ y”（y的位置為37，x的位置為44）。 但是，我的方法“ annotateString”似乎不起作用，但是我不知道為什么...

我的方法的想法是遍歷div html內容，以在所需位置添加span前綴或后綴。 由於這樣的事實，我基於字符串而不是基於先前的注釋修改的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)知道您的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也是不必要的，因為您仔細檢查了<字符，但這只是代碼檢查