RegExp函数，在Angular中带有长文本 [英] RegExp function with long text in Angular

问题描述

我有一本要显示的带有脚注的书. 我将脚注放在大括号内.

I have a book with footnotes which I want to display. I put the footnotes in their place inside curly brackets.

为了检索注释并在不同的窗口中显示它们，我在Angular 2中编写了以下类:

In order to retrieve the comments and display them in a different window, I wrote the following class in Angular 2:

export class BookreaderComponent implements OnInit {

comments() {
    var regexp = new RegExp('\{(\s*?.*?)*?\}');
    var array= regexp.exec(this.book);
    console.log(array);
  }

  constructor(public appServices: AppServices, private http: Http, private route: ActivatedRoute) { }
  book: string;
  Name: string;
  json: string;
  ngOnInit() {
    this.route.params.subscribe(params => {
      this.Name = params['name'];
      this.http.get("./assets/" + params['url'])
        .map(ref => {
          return ref;
        }).subscribe(ref => {
          this.book = ref.text();
          this.comments();
        });
    });

  }

该类调用comments函数，该函数在包含大量花括号的文本的大量文本上调用正则表达式函数.问题在于正则表达式函数的加载时间很长(我等待了一会儿，却没有加载)，同时整个页面都卡住了.

The class calls the comments function, which calls a regex function on a large amount of text, that contains a lot of curly-bracketed text. The problem is that the regex function takes a very long time to load (I waited and waited, and it didn't load), and meanwhile the whole page is stuck.

是否可以加快速度，或者将其分解成较小的块?或者也许我应该尝试一种不同的方式来显示这些脚注?

Is there a way to speed this up, or maybe break this up into smaller chunks? Or maybe I should try a different way to display these footnotes?

推荐答案

我已经设置了测试

I've set up a test Angular Plunker which omits the http.get. The speed of the regex looks fine without the observable in the picture.

我看过从右到左的方面，但是看不到它如何影响正则表达式.无论如何，我都将regex表达式保留为?，因为我注意到有人张贴RTL需要惰性评估.

I had a look at the right-to-left aspect, but can't see how it affects the regex. In any case, I left the regex expression as-is, with ? as I noticed someone posted that RTL needs lazy evaluation.

此外，大多数RTL语言讨论似乎都集中在CSS标签上，所以我想知道是否由于RTL会产生任何影响.毕竟还是字符串吗?您能否提供一个简短的RTL示例，以便我澄清我的想法.

Also, most RTL language discussions seem to focus on CSS tags, so I'm wondering if there could be any effect due to RTL. After all, it's still a string? Could you please supply a short example of RTL so I can clarify my thinking.

注意

var array= regexp.exec(this.book);仅返回第一个匹配项.要使用此语法，您需要循环播放，直到没有更多匹配为止.因此，我改用了this.book.match(re)，它更快.

var array= regexp.exec(this.book); only returns the first match. To use this syntax, you need to loop until no more matches. So instead I used this.book.match(re) which is faster.

const getMockBook = () => {
  const line = 'Here is some text with a {comment} in it';
  const lineCount = 2000;
  const book = (new Array(lineCount)).join(line);
  return book;
}

const comments1 = (book) => {
  const start = new Date();
  const regexp = new RegExp('\{(\s*?.*?)*?\}', 'g');
  const array= regexp.exec(book);
  return `elapsed: ${(new Date()) - start}, size: ${book.length}, matches: ${array.length}`
}

const comments2 = (book) => {
  const start = new Date();
  const re = /{(\s*?.*?)*?}/g
  const array= book.match(re);
  return `elapsed: ${(new Date()) - start}, size: ${book.length}, matches: ${array.length}`
}

const book = getMockBook();
console.log(comments1(book));
console.log(comments2(book));

这篇关于RegExp函数，在Angular中带有长文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！