RegExp function with long text in Angular

Question

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

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

  }

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?

From previous comment, 'it looks like it's because that it's right to left and it gets mixed up with the curly braces' - I'm not familiar with right-to-left text, but will check it out. — Richard Matsen
– Richard Matsen, Commented Nov 29, 2017 at 21:41

Richard Matsen · Accepted Answer · 2017-11-30 00:45:16Z

1

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.

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.

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.

Note

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

answered Nov 30, 2017 at 0:45

Richard Matsen

20.9k3 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

amitairos Over a year ago

It worked!!! Probably because I didn't use match, so it returned only one or two values. Wow, thanks a lot!!

Richard Matsen Over a year ago

No problem. So much for 'duplicate question'. That really is a curse.

amitairos Over a year ago

Yup :). Thanks for looking into it.

Richard Matsen Over a year ago

Should add back the regex tag now :).

Collectives™ on Stack Overflow

RegExp function with long text in Angular

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related