使用javascript突出显示用户选择的文本

Question

I am working with someone else's code, and if I change too much, it breaks. I need to highlight a portion of text that a user has highlighted. It needs to be highlighted based on the ID of that element and not on the actual text. If it is based on the actual text, it will highlight every instance of that text and I only want the instance the user selected. I have been beating my head for a week now trying to figure out how to edit this code so that it will do what I need it to do. Can anyone help me figure out what I need to edit in order to get this accomplished?

//-------------------------------------------------------
// Name: doHighlight()
// Find all occurences of the search term in the given text,
// and add some "highlight" tags to them (we're not using a
// regular expression search, because we want to filter out
// matches that occur within HTML tags and script blocks, so
// we have to do a little extra validation)
//-------------------------------------------------------
function doHighlight(bodyText, searchTerm, highlightStartTag, highlightEndTag)
{
    var newText = "";
    var i = -1;
    var lcSearchTerm = searchTerm.toLowerCase();
    var lcBodyText = bodyText.toLowerCase();
    var temp = 0;
    var counter = 0;

//********************************************************************
//********************************************************************
//********************************************************************
//Here is the ID of the <p> element where our text was selected
    alert(textId);
//Here is the text of the ID of the <p> element we selected
     alert(document.getElementById(textId).innerHTML);
//********************************************************************
//********************************************************************
//********************************************************************

    while (bodyText.length > 0)
    {
        i = lcBodyText.indexOf(lcSearchTerm, i++);

        if (i < 0)
    {
        newText += bodyText;
        bodyText = "";
    }
    else
    {
        // skip anything inside an HTML tag
         if (bodyText.lastIndexOf(">", i) >= bodyText.lastIndexOf("<", i))
        {
            // skip anything inside a <script> block
            if (lcBodyText.lastIndexOf("/script>", i) >= lcBodyText.lastIndexOf("<script", i))
            {   
//********************************************************************
//********************************************************************
//********************************************************************
// Writes the document til it reaches the search term, then adds highlightStartTag then the search term then highlightEndTag
// Then writes more of the document until the search term is reached again 
// Needs to search for the term based on the id="" given to the <p> element
// Then add the highlightStartTag and highlightEndTag
                newText += bodyText.substring(0, i) + highlightStartTag + bodyText.substr(i, searchTerm.length) + highlightEndTag;
                bodyText = bodyText.substr(i + searchTerm.length); 
                lcBodyText = bodyText.toLowerCase();
                i = +1;
//********************************************************************
//********************************************************************
//********************************************************************
                }
            }
        }
        //break;
    }
    //newText += bodyText;
    return newText;
}
//-------------------------------------------------------

Answer 1

I'm not sure if it's exactly what you need, but it might be enough to get you started; I've managed to augment the code so that instead of a generic <font> tag, the search term is highlighted with a <span> tag with a class of .hilite . The script then searches for the first occurrence of that span tag, and sets the parent's ID as a variable ( firstParent ).

Updated example

The example uses jQuery, so you could refer to the parent element like this:

$('#' + firstParent).before('<img src="myicon.png" />');

This would insert an icon before the containing parent.

You can use this as a jumping-on point to augment the script to your needs. You should probably build in an extra layer of error-checking, in case the search term isn't found, or the parent element doesn't have an ID...