突出显示来自不同标签的Html文档中的文本 [英] Highlight a text from Html Document from different tags

查看：96
本文介绍了突出显示来自不同标签的Html文档中的文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 angularjs 的新手。现在我正在突出显示HTML文档中的文本。

所以，我的代码如下所示： 

 <$ c 
 
highlight：function（container，highlightText）
 {
 var internalHighlighter = function（options）
 {
 
 var id = {
 container：container，
 tokens：tokens，
 all：all，
 token：token，
 className：className，
 sensitiveSearch：sensitiveSearch
}，
 tokens = options [id.tokens]，
 allClassName = options [id.all] [id .className]，
 allSensitiveSearch = options [id.all] [id.sensitiveSearch]; 
 
 
函数checkAndReplace（node，tokenArr，classNameAll，sensitiveSearchAll）
 {
 var nodeVal = node.nodeValue，parentNode = node.parentNode，
i， j，curToken，myToken，myClassName，mySensitiveSearch，$ b $ finalClassName，finalSensitiveSearch，
 foundIndex，begin，matched，end，
 textNode，span，isFirst; 
 
 for（i = 0，j = tokenArr.length; i  {
 curToken = tokenArr [i]; 
 myToken = curToken [id.token]; 
 myClassName = curToken [id.className]; 
 mySensitiveSearch = curToken [id.sensitiveSearch]; 
 
 finalClassName =（classNameAll？myClassName ++ classNameAll：myClassName）; 
 
 finalSensitiveSearch =（typeof sensitiveSearchAll！==undefined？sensitiveSearchAll：mySensitiveSearch）; 
 
 isFirst = true; 
 while（true）
 {
 if（finalSensitiveSearch）
 foundIndex = nodeVal.indexOf（myToken）; 
 else 
 foundIndex = nodeVal.toLowerCase（）。indexOf（myToken.toLowerCase（））; 
 
 if（foundIndex< 0）
 {
 if（isFirst）
 break; 
 
 if（nodeVal）
 {
 textNode = document.createTextNode（nodeVal）; 
 parentNode.insertBefore（textNode，node）; 
} // End if（nodeVal）
 
 parentNode.removeChild（node）; 
休息; 
} // End if（foundIndex< 0）
 
 isFirst = false; 
 
 
 begin = nodeVal.substring（0，foundIndex）; 
 matched = nodeVal.substr（foundIndex，myToken.length）; 
 
 if（begin）
 {
 textNode = document.createTextNode（begin）; 
 parentNode.insertBefore（textNode，node）; 
} //结束if（开始）
 
 span = document.createElement（span）; 
 span.className + = finalClassName; 
 span.appendChild（document.createTextNode（matched））; 
 parentNode.insertBefore（span，node）; 
 
 nodeVal = nodeVal.substring（foundIndex + myToken.length）; 
} //时间
 
} //下一个我
}; //结束函数checkAndReplace 
 
函数迭代器（p）
 {
 if（p === null）return; 
 
 var children = Array.prototype.slice.call（p.childNodes），i，cur; 
 
 if（children.length）
 {
 for（i = 0; i< children.length; i ++）
 {
 cur = children [一世]; 
 if（cur.nodeType === 3）
 {
 checkAndReplace（cur，tokens，allClassName，allSensitiveSearch）; 
} 
 else if（cur.nodeType === 1）
 {
 iterator（cur）; 
} 
} 
} 
}; //结束函数迭代器
 
迭代器（options [id.container]）; 
} //结束函数荧光笔
; 
 
 
 internalHighlighter（
 {
 container：container 
，all：
 {
 className：highlighter
 
令牌：[
 {
令牌：highlightText 
，className：highlight
，sensitiveSearch：false 
} 
] 
} 
）; // End Call internalHighlighter 
 
} // End Function highlight 
 
};

，我正在使用它 - 

 函数TestTextHighlighting（highlightText）
 {
 var container = document.getElementById（元素ID）; 
 InstantSearch.highlight（container，highlightText）; 
 
 $ / code>

现在，这里当前有一些文本需要在一个范围内突出显示那么它工作得很好。但是，如果有一段文本来自两个跨度或来自任何其他标记，那么它不会突出显示该文本。像

例如 

 < ; p style =padding：0; color：＃000000; font-size：12pt; line-height：1.0; margin-right：0; margin-left：72pt; text-indent：-72pt; font-family：& amp ;Times New Roman& quot; margin-top：0; orphans：2; margin-bottom：0; widows：2; text-align：justify>< span style =vertical-align：baseline;字体大小：11磅;字体家庭：安培; QUOT;宋体&安培; QUOT ;;字体重量：700\" >简介：&安培; NBSP;&安培; NBSP;&安培; NBSP;&安培; NBSP;&安培; NBSP;&安培 & nbsp;< / span>< span style =color：＃000000; font-weight：400; text-decoration：none; vertical-align：baseline; font-size：11pt ; font-family：& quot; Calibri& quot ;; font-style：normal>开发用于添加管理的网络应用程序< / span>< / p> 
< span style =vertical-align：baseline; font-size：11pt; font-family：& quot; Calibri& quot ;; font-weight：700>贡献：& nbsp;& amp  & nbsp;& nbsp;& nbsp;& nbsp;< / span>< span style =vertical-align：baseline; font-size：11pt; font-family：& quot; Calibri& quot ;; font-weight：400>它是内部使用的web应用程序，用于开发针对& nbsp;& amp; ; NBSP;&安培; NBSP;&安培; NBSP;&安培; NBSP;&安培; NBSP;&安培; NBSP;&安培; NBSP;&安培; NBSP;&安培; NBSP;&安培; NBSP;&安培; NBSP;&安培; NBSP;&安培; NBSP ;&安培; NBSP;&安培; NBSP;< /跨度>

在此如果我有文本突出显示开发了用于添加管理的Web应用程序。 然后它工作。但是如果我想突出显示整个文本，例如 -


描述：开发用于添加管理的Web应用程序。

贡献：这是用于
的内部使用web应用程序，我们开发了应用程序用于添加管理


因此，Here It It没有突出显示。任何人都可以帮助我吗？


<！DOCTYPE html>< html>< script src =https：//ajax.googleapis>


I am new to angularjs. Now I am Highlighting a text from the HTML document.

So, My code is like:

var InstantSearch = {

    "highlight": function (container, highlightText)
    {
        var internalHighlighter = function (options)
        {

            var id = {
                container: "container",
                tokens: "tokens",
                all: "all",
                token: "token",
                className: "className",
                sensitiveSearch: "sensitiveSearch"
            },
            tokens = options[id.tokens],
            allClassName = options[id.all][id.className],
            allSensitiveSearch = options[id.all][id.sensitiveSearch];


            function checkAndReplace(node, tokenArr, classNameAll, sensitiveSearchAll)
            {
                var nodeVal = node.nodeValue, parentNode = node.parentNode,
                    i, j, curToken, myToken, myClassName, mySensitiveSearch,
                    finalClassName, finalSensitiveSearch,
                    foundIndex, begin, matched, end,
                    textNode, span, isFirst;

                for (i = 0, j = tokenArr.length; i < j; i++)
                {
                    curToken = tokenArr[i];
                    myToken = curToken[id.token];
                    myClassName = curToken[id.className];
                    mySensitiveSearch = curToken[id.sensitiveSearch];

                    finalClassName = (classNameAll ? myClassName + " " + classNameAll : myClassName);

                    finalSensitiveSearch = (typeof sensitiveSearchAll !== "undefined" ? sensitiveSearchAll : mySensitiveSearch);

                    isFirst = true;
                    while (true)
                    {
                        if (finalSensitiveSearch)
                            foundIndex = nodeVal.indexOf(myToken);
                        else
                            foundIndex = nodeVal.toLowerCase().indexOf(myToken.toLowerCase());

                        if (foundIndex < 0)
                        {
                            if (isFirst)
                                break;

                            if (nodeVal)
                            {
                                textNode = document.createTextNode(nodeVal);
                                parentNode.insertBefore(textNode, node);
                            } // End if (nodeVal)

                            parentNode.removeChild(node);
                            break;
                        } // End if (foundIndex < 0)

                        isFirst = false;


                        begin = nodeVal.substring(0, foundIndex);
                        matched = nodeVal.substr(foundIndex, myToken.length);

                        if (begin)
                        {
                            textNode = document.createTextNode(begin);
                            parentNode.insertBefore(textNode, node);
                        } // End if (begin)

                        span = document.createElement("span");
                        span.className += finalClassName;
                        span.appendChild(document.createTextNode(matched));
                        parentNode.insertBefore(span, node);

                        nodeVal = nodeVal.substring(foundIndex + myToken.length);
                    } // Whend

                } // Next i 
            }; // End Function checkAndReplace 

            function iterator(p)
            {
                if (p === null) return;

                var children = Array.prototype.slice.call(p.childNodes), i, cur;

                if (children.length)
                {
                    for (i = 0; i < children.length; i++)
                    {
                        cur = children[i];
                        if (cur.nodeType === 3)
                        {
                            checkAndReplace(cur, tokens, allClassName, allSensitiveSearch);
                        }
                        else if (cur.nodeType === 1)
                        {
                            iterator(cur);
                        }
                    }
                }
            }; // End Function iterator

            iterator(options[id.container]);
        } // End Function highlighter
        ;


        internalHighlighter(
            {
                container: container
                , all:
                    {
                        className: "highlighter"
                    }
                , tokens: [
                    {
                        token: highlightText
                        , className: "highlight"
                        , sensitiveSearch: false
                    }
                ]
            }
        ); // End Call internalHighlighter 

    } // End Function highlight

};

and I am using it like -

function TestTextHighlighting(highlightText)
{
    var container = document.getElementById("ID of the element");
    InstantSearch.highlight(container, highlightText);
}

Now, Here currently when there is text which needs to be highlighted in a span then it works perfectly fine. But When there is a text which is from two spans or from any another tag that time it is not highlighting that text . Like

For e.g.

<p style="padding:0;color:#000000;font-size:12pt;line-height:1.0;margin-right:0;margin-left:72pt;text-indent:-72pt;font-family:&quot;Times New Roman&quot;;margin-top:0;orphans:2;margin-bottom:0;widows:2;text-align:justify"><span style="vertical-align:baseline;font-size:11pt;font-family:&quot;Calibri&quot;;font-weight:700">Description:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:&quot;Calibri&quot;;font-style:normal">Developed web app for add management.</span></p>
<span style="vertical-align:baseline;font-size:11pt;font-family:&quot;Calibri&quot;;font-weight:700">Contribution:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="vertical-align:baseline;font-size:11pt;font-family:&quot;Calibri&quot;;font-weight:400">It was the internal use web app for the <br>we developed the app for the add management for the.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>

In this If I have text to highlight Developed web app for add management. Then It works. But If I want to highlight whole text like -

Description: Developed web app for add management.
Contribution: It was the internal use web app for the we developed the app for the add management for the

So, Here It is not highlighting. Can any one please help me with this?

解决方案

Instead of $timeout do something else.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<style>
.highlight {
    color:white;
    background-color:lightblue;
    padding:20px;
    font-family:"Courier New";
}
</style>
<div ng-app="myApp" ng-controller="myCtrl">

<p> <span ng-class="changeClass?'highlight':''">Some text Developed web app for add management. </span></p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$timeout) {
$scope.changeClass = false;
    // Do some stuff and change veriable
    $timeout(()=>{
    	$scope.changeClass = true;
    },1500)
});
</script>

</body>
</html>

这篇关于突出显示来自不同标签的Html文档中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆