Question

我是棱角分明的新手。因此，我想突出显示HTML文档中的某些文字。

我的代码就像 -

服务 -

getDocumentAsHTML: function (docType, filename) {
                    var url = 'rez' + '/htmlContent/' + docType + '/' + filename;
                    var config = {};
                    config.headers = {
                        "Accept": "text/html",
                        "X-AUTH-TOKEN": loginService.getAuthToken()
                    };
                    return $http.get(url, config)
                        .then(function (response) {
                            return response.data;
                        },
                        function (error) {
                            $log.error(error);
                            return $q.reject(error);
                        });
                },

并强调，我写了一个像 -

这样的函数

$scope.highlight = function(content, text, className, notByWordBoundry){
                    var RegExpEscapeText, str;
                    if (!(content && content.replace)) {
                        return '';
                    }
                    if (!text) {
                        return $sce.trustAsHtml(content);
                    }
                    if (!className) {
                        className = 'mark';
                    }
                      RegExpEscapeText = text.replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&");
                      if (!notByWordBoundry) {
                          str = new RegExp('(\\b)' + RegExpEscapeText + '(\\b)','gi');
                      } else {
                          str = new RegExp(RegExpEscapeText,'gi');
                      }
                      return $sce.trustAsHtml(content.replace(str , '<span class=' + className + '>$&</span>'));
                };

所以，我有一个按钮，点击它打开一个模型，其中包含我可以编辑文档内容的html文档。所以，现在我想强调一下这个文件中的某些文字。所以，对于那个

我的HTML是 -

<div id="htmlEditorModal" class="modal fade" role="dialog" aria-labelledby="confirmModal" aria-hidden="true" data-backdrop="static" data-keyboard="false" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" ng-click="confirmback()">&times;</button>
                <h4 class="modal-title">
                    <strong>Edit Document</strong>
                </h4>
            </div>
            <div class="modal-body">
                <div ng-show="fetchingDocumentAsHTML || updatingDocumentAsHTML"
                    class="loading-backdrop">
                    <div class="spinner-container text-center">
                        <h3>
                            <strong>{{htmlEditorLoadingMsg}}</strong>
                            <span class="text-color"><i class="fa fa-spin fa-refresh"></i></span>
                        </h3>
                    </div>
                </div>
                <div text-angular
                    class="html-editor-container "
                    ng-hide="fetchingDocumentAsHTML || updatingDocumentAsHTML"
                    ng-model="htmlDocument">
                </div>
            </div>
            <div class="modal-footer">
                <button class="button-size btn btn-labeled btn-info pull-left"
                     ng-click="confirmback()">
                    <i class="fa fa-arrow-left" aria-hidden="true"></i>
                    <span class="small-left-margin">Back</span>
                </button>
                <button class="button-size btn btn-primary pull-right"
                ng-disabled="fetchingDocumentAsHTML || updatingDocumentAsHTML"
                    ng-click="updateDocument()"
                    <i class="fa fa-save" aria-hidden="true"></i>
                    <span class="small-left-margin">Save</span>
                </button>
            </div>
        </div>
    </div>
</div>  

    So, In this was planning to use 


 <span ng-bind-html="highlight(value, text)"></span>

我无法突出显示文字。任何人都可以帮助我吗？

在角度js中突出显示文档中的文本

0 个答案: