⚡ Angular Regex Project

• This app highlights search text within a string. It renders HTML on the screen via a variable and manipulates that HTML based on a query, a regular expression and REGEX replace logic.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular Regex Project
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • ✉️ Contact

📚 General info

• A regular expression is "A sequence of characters that forms a search pattern, mainly for use in pattern-matching with strings, or string matching, i.e. “find and replace”-like operations."

📷 Screenshots

.

📶 Technologies

• Angular v13
• Javascript Regular expressions

💾 Setup

• Run ng test to run some simple Jasmin testson Karma.
• Run ng lint to check syntax using TSLint. Note TSLint will be replaced with ESLint
• Run ng serve for a dev server.
• Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

💻 Code Examples

• extract from app.component.ts file

export class AppComponent {

  private content: string;
  public query: string;

  public constructor() {
  // tslint:disable-next-line: max-line-length
    this.content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a quam ornare bibendum; ligula; a, rhoncus; ligula. Etiam; aliquet, justo; sollicitudin; imperdiet; luctus, nulla justo; sodales; mi, sit; amet; semper; nisl; velit; vel; massa. In; hac; habitasse; platea; dictumst';
  }

  // if no text in query then just return
  public highlight(): string {
    if (!this.query) {
      return this.content;
    }
    /*The regular expression looks for all case insensitive occurrences of this.query.
    Take the matches and wrap them in HTML tags with the CSS class name that we created.*/
    return this.content.replace(new RegExp(this.query, 'gi'), match => {
      return '<span class="highlightText">' + match + '</span>';
    });
  }
}

🆒 Features

• text that matches what is being searched for is highlighted. The query is case-insensitive.

📋 Status & To-Do List

• Status: Working. Passes basic Jasmine tests
• To-Do: This could be used as a sand-box to try out other angular functionality. Regex could be expanded to search for numbers and highlight them in a different colour etc.

👏 Inspiration

• "Highlight Text Within a String Using Angular and Regular Expressions", by Nic Raboy of X-Team.com.

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: [email protected]