使用跨度动态突出显示div中的多个单词

Question

I want to highlight (or "annotate") several words inside a div, using spans with a background color.

In my (minimal) example below, the words "x" and "y" should be annotated (position of y is 37 and of x is 44). However, my method "annotateString" does not seem to work, but I don't know why...

The idea of my method is to iterate over the div html content to add the span prefix or suffix at the needed positions. Because of the fact, that I give the positions based on the string and not on the perhaps due to prior annotations modified html content, I want the position pointer "pos" to freeze if its inside a html element (f.ex. already existing spans).

 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

There are three errors I had to cop with

• your html contain a < , that I replaced with <
• the positions where a little bit odd.
• I'm not sure I got your if (pos + 1 == end) so I ended up with another solution, I think code is self explanatory!

 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> 

Also your initialisation of freeze variable to true is not necessary since you double check for < character, but that's just code review