The simplest use of Regular Expressions is to find a plain text pattern. In this lesson we'll look at at finding plain text patterns as well as using the metacharacter "." and how to escape a metacharacter.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Javascript Regular Expressions: Find Plain Text Patterns</title>

  <style>

    pre {

      line-height: 2;

    }

    span {

      background-color: #eee;

      padding: 1px;

      outline: 1px solid #999;

    }

  </style>

</head>

<body>

  <pre></pre>

</body>

</html>
'use strict';

var str = `Cat

sat on

the hat.`;

var regex = /..\./g  //any two charaters follow by a '.'

/**

 * @param  String str

 * @param  RegExp regex

 * @param  HTMLElement target

 */

const output = (str, regex, target) => {

  target.innerHTML =

    str.replace(regex, str =>

      `<span>${str}</span>`

    );

}

output(str, regex, document.querySelector('pre'));

[Regular Expressions] Find Plain Text Patterns的更多相关文章

  1. Regular Expressions in Grep Command with 10 Examples --reference

    Regular expressions are used to search and manipulate the text, based on the patterns. Most of the L ...

  2. 正则表达式（Regular expressions）使用笔记

    Regular expressions are a powerful language for matching text patterns. This page gives a basic intr ...

  3. PCRE Perl Compatible Regular Expressions Learning

    catalog . PCRE Introduction . pcre2api . pcre2jit . PCRE Programing 1. PCRE Introduction The PCRE li ...

  4. 8 Regular Expressions You Should Know

    Regular expressions are a language of their own. When you learn a new programming language, they're ...

  5. Regular Expressions --正则表达式官方教程

    http://docs.oracle.com/javase/tutorial/essential/regex/index.html This lesson explains how to use th ...

  6. Introducing Regular Expressions 学习笔记

    Introducing Regular Expressions 读书笔记 工具: regexbuddy:http://download.csdn.net/tag/regexbuddy%E7%A0%B4 ...

  7. [转]8 Regular Expressions You Should Know

    Regular expressions are a language of their own. When you learn a new programming language, they're ...

  8. Finding Comments in Source Code Using Regular Expressions

    Many text editors have advanced find (and replace) features. When I’m programming, I like to use an ...

  9. Python re module (regular expressions)

    regular expressions (RE) 简介 re模块是python中处理正在表达式的一个模块 r"""Support for regular expressi ...

随机推荐

  1. AsyncHttpClient 登录 Application Fragment 回调 监听 软键盘

    Activity /**登录界面及登陆后用户首页界面,使用两个Fragment实现*/ public class LoginActivity extends Activity implements L ...

  2. 前端bug记录---不定时更新

    在项目的开发中难免遇到各种各样的bug,我觉得还是有必要记录一下的,方便日后查询. safari window resize  为满足日常轮播需求,做一个符合当前业务的轮播插件,其中需要考虑windo ...

  3. Path对象

    Path是连续的Segment的集合,除了 Path 的第一个Segment和最后一个Segment外,其余的Segment的起始点都是前一个Segment的终止点,即Path对象的中的Segment ...

  4. JSONP的原理

    JSONP的原理 JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的. <script type="text/j ...

  5. 初学mysql命令

    创建数据库mydb: create database mydb; 运行sql脚本文件:(连接数据库后) \. e:\myphpWeb\createTables.sql 删除数据库mydb: drop ...

  6. [Mugeda HTML5技术教程之9]使用元件

    元件是一个可以在舞台上实例化和再利用的预先生成的独立动画.一个元件有它自己的时间轴(层,单位等),可以独立显示的动画.元件提高了动画的重用性和灵活性,是个强大的存在.元件可用于创建复杂的动画效果. 所 ...

  7. ECSTORE导航吸顶功能

    ecstore导航吸顶功能,在导航父元素中加入id,如: <div id="mainNav1"></div> 在footer.html中添加以下js代码: ...

  8. JavaScript加密解密压缩工具

    <script> a=62; function encode() { var code = document.getElementById('code').value; code = co ...

  9. R语言学习网站

    一个不错的个人R语言博客网站 http://blog.fens.me/r-overview/

  10. iOS学习之导航条NavigationControl的一些属性设置

    /** * 配置公共的属性,该属性作用于所有的导航条界面; */ - (void)configureConmmonPropety { //1.设置导航条的颜色 self.navigationContr ...