【问题标题】：How can I add count for the search results into the codemirror如何将搜索结果的计数添加到代码镜像中
【发布时间】：2019-10-08 16:38:26
【问题描述】：

在我搜索了一些关于如何将搜索结果的计数添加到 codemirror 之后，我没有找到任何东西，我正在研究 angular 并且我使用了 ngx-codemirror，所以我发现唯一的方法就是编辑ngx-codemirror包中的search.js。

我需要寻找更好的方法，因为如果我要更改包中的 search.js 文件，那会有点糟糕，因为我们在一个团队中工作，每天都有很多推送，我们无法推送每次都是 node_modules。

【问题讨论】：

标签： angular typescript codemirror

【解决方案1】：

角度解决方案：

注意：请记住，这不是最佳解决方案（无需编辑CodeMirror 包）

HTML：

        <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;
            }
          }
        }

现在尝试在CodeMirror 上使用 CTRL+F，您将看到搜索计数

现场演示：https://stackblitz.com/edit/angular-codemirror-search-count

【讨论】：