javascript - 忽略 HTML 标签以突出显示匹配的单词

Question

我想在突出显示与搜索输入匹配的单词后将 HTML 模板内容替换为新内容。

如代码片段所示，我使用突出显示过滤器，通过添加 &zwj;<span class="highlighted">$1&zwj;</span> 为匹配的单词添加黄色背景。 .

问题一

问题是有时突出显示不会执行，我无法弄清楚为什么，例如，在搜索 accountin 时，那么它就会突出显示，但是当搜索 accounting 时，那么它就不会突出显示。

仅当匹配的单词位于某些子标签内时才会出现此问题，例如 <bold>和<tag>以及其他，您可以尝试搜索accounting你就会明白我的意思了。为什么会出现这种情况？以及如何修复它？

问题二

在 HTML 中，我使用 Material 图标，例如 <md-icon class="material-icons ltr">folder</md-icon> ，以及搜索 folder 时，然后该图标将突出显示。

即使我使用像 <md-icon md-svg-src="path/user.svg"></md-icon> 这样的 svg 图标，同样的问题也会发生。

那么，有什么办法可以避免这种情况吗？

angular.module("myApp", ["ngMaterial"])
.filter('highlight', function ($sce) {
        function mapText(text,tag,tagvalue){
            var reg = new RegExp("[\>][^\<\>.]*"+tag+"[^\<\>.][\<]*","gi");
            var result = text.replace(reg,function(item,exp){               
                var subRegex = new RegExp(tag,"gi");
                return item.replace(subRegex,tagvalue);
            });
            return result;
        }
        return function (text, searchSrting) {
            if(searchSrting){
                searchSrting = searchSrting.split(/\s+/);
                if(typeof text !== "undefined") {
                        for (var i = 0; i < searchSrting.length; i++) {
                            if(searchSrting[i]==""){
                                continue;
                            }
                            else{
                                var tagvalue = '&zwj;<span class="highlighted">' + searchSrting[i] + '&zwj;</span>';
                                text = mapText(text, searchSrting[i], tagvalue);
                            }
                        }
                }
                return $sce.trustAsHtml(text)
            }
        }
    })
.controller("main", function($scope){ 
  $scope.searchString="";
  $scope.content="<module> <ti-tle>User Management</ti-tle><br><tag-group><tag>User Management</tag></tag-group><info-group><info><md-icon class='material-icons ltr'>perm_identity</md-icon>published by: Ha ba</info>        <info><md-icon class='material-icons ltr'>folder</md-icon>User Management</info><info><md-icon class='material-icons ltr'>publish</md-icon>published: 25 May 2016</info></info-group><hr>In <bold>AMe</bold>, you can manage multiple bank accounts <br><br>    <sub-title>        Introduction  Accounting</sub-title>    The Sales Planner is a useful step-by-step guide created to help you implement your sales funnel    <br>Accounting    Go to <bold>Accounting</bold> ‣ <bold>Configuration</bold> ‣ <bold>Bank Accounts</bold> and click on the Bank item. Edit it        <note><md-icon class='material-icons'>error_outline</md-icon>         will detect the bank account type (e.g. IBAN) to allow some payment method like SEPA.    </note>    <br><br>    <sub-title>        Set up your first sales team    </sub-title>    For example, if within your company Tim is selling products and John is selling maintenance contracts, they will be assigned to different teams and will only receive opportunities that make sense to them.    <br><br>        <sub-title>        Set up incoming email to generate opportunities    </sub-title>    In CRM, one way to generate opportunities into your sales team is to create a generic email address as a trigger.    </module>";
})

module{
        font-size: 14px;
        color: #484848;
    }
    ti-tle {
        font-size: x-large;
        color: rgb(50, 118, 177);
        display: block;
        font-weight: bold;
    }
    tag-group{
        display: block;
        line-height: 3;
    }
    tag{
        background-color: #daebe8;
        padding:2px 6px;
        font-weight: bold;
        font-size: 12px;
        margin: 2px;
        border-radius: 4px;
        cursor: pointer;
        color: #667292;
    }
    tag:hover{
        background-color: #87bdd8;
    }
    info-group{display: block}
    info{
        color: gray;
        margin: 4px;
        font-size: 12px;
    }
    sub-title{
        font-weight: bold;
        font-size: 18px;
        display: block;
        line-height: 2;
    }
    img{
        display: block;
        margin: 30px 0;
        width: 100%;
    }
    bold{
        font-weight: bold;
    }
    note{
        background-color: antiquewhite;
    }
    .highlighted {
        background: yellow;
    }
    md-icon{direction: ltr}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-aria.js"></script>
<script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div ng-app="myApp">
<div ng-controller="main">
  <label>search</label>
  <input ng-model="searchString"/>
  <div ng-if="!searchString">
<module>
    <ti-tle>User Management</ti-tle>
    <br>
    <tag-group>
        <tag>User Management</tag>
    </tag-group>
    <info-group>
        <info><md-icon class="material-icons ltr">perm_identity</md-icon>published by: Ha ba</info>
        <info><md-icon class="material-icons ltr">folder</md-icon>User Management</info>
        <info><md-icon class="material-icons ltr">publish</md-icon>published: 25 May 2016</info>
    </info-group>
    <hr>

    In <bold>AMe</bold>, you can manage multiple bank accounts
    <br><br>
    <sub-title>
        Introduction Accounting
    </sub-title>
    The Sales Planner is a useful step-by-step guide created to help you implement your sales funnel
    <br>
  Accounting
    Go to <bold>
  Accounting</bold> ‣ <bold>Configuration</bold> ‣ <bold>Bank Accounts</bold> and click on the Bank item. Edit it
    <note><md-icon class="material-icons">error_outline</md-icon>
       will detect the bank account type (e.g. IBAN) to allow some payment method like SEPA.
    </note>
    <br><br>
    <sub-title>
        Set up your first sales team
    </sub-title>
    For example, if within your company Tim is selling products and John is selling maintenance contracts, they will be assigned to different teams and will only receive opportunities that make sense to them.


    <br><br>
    <sub-title>
        Set up incoming email to generate opportunities
    </sub-title>
    In  CRM, one way to generate opportunities into your sales team is to create a generic email address as a trigger. For example, if
</module>

  
  </div>
  <div ng-if="searchString"  ng-bind-html="content | highlight:searchString"></div>

</div>
</div>

Answer 1

首先，我对快速测试的答案感到抱歉。

这是您的答案:

var reg = new RegExp("[\>][^\<\>.]*"+tag+"[^\<\>.][\<]*","gi");

在此行中，正则表达式搜索任何字符，但不搜索“><”。这就是您的代码工作错误的原因，正确的代码在这里:

var reg = new RegExp("[\>][^\<\>.]*"+tag+"[^\<\>.]*[\<]*","gi");

第 2 部分:在此代码中，您将逐个替换单词。因此，当您替换一个单词时，第二个包含该单词的正则表达式将不匹配。示例:

我们的亮点词是火和消防员。

var text = "<div>fireman has killed fire</div>";

第一次循环后文本将如下所示:

text = "<div><highlight>fire</highlight>man has killed <highlight>fire</highlight></div>";

所以我们的正则表达式不会匹配这个新文本中的第二个单词。

但是如果我们按文本长度对数组进行排序。这个问题将会得到解决。

在 <md-icon class="material-icons ltr">folder</md-icon>案例看起来这个正则表达式不会帮助你。如果您想在项目中使用正则表达式来执行此操作，您可以在正则表达式中添加所有案例。

但是像这样的正则表达式中的特定用法...我认为这不是最好的方法。

因为；将来如果您决定更改图标库。你也必须改变你的正则表达式。正则表达式并不是第一眼就能理解的语言。最终这将是一项非常非常糟糕的隐藏生意。

希望您能找到您想要的东西。