Question

我正在使用其他人的代码，如果我改变太多，它会中断。我需要突出显示用户突出显示的部分文本。它需要根据该元素的ID而不是实际文本进行突出显示。如果它基于实际文本，它将突出显示该文本的每个实例，我只想要用户选择的实例。我已经打了一个星期，现在试图找出如何编辑这些代码，以便它能够做我需要做的事情。任何人都可以帮我弄清楚我需要编辑什么才能完成这项工作吗？

//-------------------------------------------------------
// 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

我不确定它是否正是你所需要的，但它可能足以让你开始;我设法扩充了代码，以便使用<font>标记突出显示搜索字词，而不是通用的<span>标记，而.hilite标记的类为firstParent。然后，该脚本将搜索该span标记的第一个匹配项，并将父级ID设置为变量（$('#' + firstParent).before('<img src="myicon.png" />');）。

Updated example

该示例使用jQuery，因此您可以像这样引用父元素：

{{1}}

这会在包含父级之前插入一个图标。

您可以将此作为一个跳跃点来增强脚本以满足您的需求。如果找不到搜索词，或者父元素没有ID，你应该建立一个额外的错误检查层......

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

1 个答案: