如何将搜索结果的计数添加到Codemirror中

Question

我做了一些关于如何将搜索结果的数量添加到如图所示的Codemirror中的搜索之后，我什么都没找到，我正在使用angular并使用ngx-codemirror，所以我找到了唯一的方法是在ngx-codemirror软件包中编辑search.js。

我需要寻找一种更好的方法，因为如果我要更改程序包中的search.js文件，那会有些不好，因为我们正在团队合作，每天都有很多推动，而我们不能推动每次都使用node_modules。

Answer 1

角度的解决方案：

注意：请记住，这不是最佳解决方案 （无需编辑public function today() { $videos = Video::whereBetween('created_at', [now(), now()->addDays(7)]) ->orderBy('created_at') ->groupBy(\DB::raw('DAY(created_at)')) })->get(); return view('video.today', compact('videos')); } 软件包）

HTML：

CodeMirror

打字稿：

        <ngx-codemirror #codeEditor [(ngModel)]="htmlString" [options]="options" name="html">
        </ngx-codemirror>
        <span *ngIf="resultCount > 0" class="btn"> Search amount : {{ resultCount }}</span>

现在在 export class HtmlEditorComponent implements OnInit, DoCheck { @ViewChild('codeEditor') codeEditor: CodemirrorComponent; resultCount = 0; htmlString = ''; constructor() {} ngDoCheck() { if ( this.codeEditor && this.codeEditor.codeMirror && this.htmlString.length > 0 ) { this.checkSearch(); } } checkSearch() { const searchField = document.getElementsByClassName( 'CodeMirror-search-field' )[0] as any; if (searchField && searchField.value.length > 0) { const text = new RegExp(searchField.value, 'gi'); const count = (this.htmlString.match(text) || []).length; this.resultCount = count; } else { this.resultCount = 0; } } } 上使用CTRL + F尝试，您将看到搜索计数

实时演示：https://stackblitz.com/edit/angular-codemirror-search-count