githubcandybabe.github.io/index.html at master · githubcandybabe/githubcandybabe.github.io

History

1353 lines (761 loc) · 83.5 KB

Raw

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

595

596

597

598

599

600

601

602

603

604

605

606

607

608

609

610

611

612

613

614

615

616

617

618

619

620

621

622

623

624

625

626

627

628

629

630

631

632

633

634

635

636

637

638

639

640

641

642

643

644

645

646

647

648

649

650

651

652

653

654

655

656

657

658

659

660

661

662

663

664

665

666

667

668

669

670

671

672

673

674

675

676

677

678

679

680

681

682

683

684

685

686

687

688

689

690

691

692

693

694

695

696

697

698

699

700

701

702

703

704

705

706

707

708

709

710

711

712

713

714

715

716

717

718

719

720

721

722

723

724

725

726

727

728

729

730

731

732

733

734

735

736

737

738

739

740

741

742

743

744

745

746

747

748

749

750

751

752

753

754

755

756

757

758

759

760

761

762

763

764

765

766

767

768

769

770

771

772

773

774

775

776

777

778

779

780

781

782

783

784

785

786

787

788

789

790

791

792

793

794

795

796

797

798

799

800

801

802

803

804

805

806

807

808

809

810

811

812

813

814

815

816

817

818

819

820

821

822

823

824

825

826

827

828

829

830

831

832

833

834

835

836

837

838

839

840

841

842

843

844

845

846

847

848

849

850

851

852

853

854

855

856

857

858

859

860

861

862

863

864

865

866

867

868

869

870

871

872

873

874

875

876

877

878

879

880

881

882

883

884

885

886

887

888

889

890

891

892

893

894

895

896

897

898

899

900

901

902

903

904

905

906

907

908

909

910

911

912

913

914

915

916

917

918

919

920

921

922

923

924

925

926

927

928

929

930

931

932

933

934

935

936

937

938

939

940

941

942

943

944

945

946

947

948

949

950

951

952

953

954

955

956

957

958

959

960

961

962

963

964

965

966

967

968

969

970

971

972

973

974

975

976

977

978

979

980

981

982

983

984

985

986

987

988

989

990

991

992

993

994

995

996

997

998

999

1000

<!DOCTYPE html>

<head>

var NexT = window.NexT || {};

var CONFIG = {

root: '/',

scheme: 'Muse',

version: '5.1.4',

sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},

fancybox: true,

tabs: true,

motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},

duoshuo: {

userId: '0',

author: 'Author'

algolia: {

applicationID: '',

apiKey: '',

indexName: '',

hits: {"per_page":10},

labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}

}

};

</script>

</head>

<div class="container sidebar-position-left

page-home">

tse

</a>

</div>

</div>

</button>

</div>

Home

</a>

</li>

Archives

</a>

</li>

</ul>

</nav>

</div>

</header>

Posted on

2018-06-13

</time>

</div>

</header>

</div>

</footer>

</div>

</article>

<a class="post-title-link" href="/2018/03/08/javascript基础回顾--正则表达式/" itemprop="url">javascript基础回顾--正则表达式</a></h1>

Posted on

2018-03-08

</time>

</div>

</header>

<h2 id="javascript基础回顾–正则表达式"><a href="#javascript基础回顾–正则表达式" class="headerlink" title="javascript基础回顾–正则表达式"></a>javascript基础回顾–正则表达式</h2>语法

常用：

<ul>

<li>\d：代表任意一个数字，0~9的任意一个</li>

<li>\w：任意一个字母或数字或下划线，也就是 A~Z,a~z,0~9,_ 中任意一个</li>

<li>\s：包括空格、制表符、换页符等空白字符的其中任意一个</li>

<li>.：小数点可以匹配除了换行符（\n）以外的任意一个字符（包括数字）</li>

<li>\b:匹配这样的位置(字符和边界符之间的位置)：它的前一个字符和后一个字符不全\w,单词边界符可以是中文符号、英文符号、空格、制表符、回车符号，以及各种边界，比如单词在开头，单词在结尾。比如：”end\b”可以匹配”weekend”，”weekend “, “weekend,”等</li>

</ul>

以上写法，当其为大写时刚好相反

<ul>

<li>\S：匹配所有非空白字符（”\s” 可匹配各个空白字符）</li>

<li>\D：匹配所有的非数字字符</li>

<li>\W：匹配所有的字母、数字、下划线以外的字符</li>

<li>\B：\b相反，匹配字符和非边界符之间的位置,比如：”\Bee\B”可以匹配”weekend”</li>

</ul>

特殊符号的含义：

<ul>

<li>?：匹配表达式0次或者1次，相当于 {0,1}，比如：”a[cd]?”可以匹配 “a”,”ac”,”ad”</li>

<li>+：表达式至少出现1次，相当于 {1,}，比如：”a+b”可以匹配 “ab”,”aab”,”aaab”</li>

<li>：表达式不出现或出现任意次，相当于 {0,}，比如：”ab”可以匹配 “b”,”aaaab”.</li>

<li>^：与字符串开始的地方匹配，不匹配任何字符，比如：”^aaa”可以匹配”aaasdsd”，”\^a”可以匹配”^av”</li>

<li>$：与字符串结束的地方匹配，不匹配任何字符，比如：”aaa$”可以匹配”sdsdaaa”</li>

<li>|：左右两边表达式之间 “或” 关系，匹配左边或者右边，比如“Tom|Jack‘可以匹配到”hi,Tom, i am Jack”</li>

</ul>

{}的用法

一般放在被修饰的表达式的后面

<ul>

<li>{n}：表达式重复n次，比如：”a{5}” 相当于 “aaaaa”</li>

<li>{m,n}：表达式至少重复m次，最多重复n次，比如：”ba{1,3}”可以匹配 “ba”或”baa”或”baaa”</li>

<li>{m,}：表达式至少重复m次，比如：”\w\d{2,}”可以匹配 “a12”,”_456”,”M12344”</li>

</ul>

[]的用法

使用方括号 [ ] 包含一系列字符，能够匹配其中任意一个字符。用包含一系列字符，则能够匹配其中字符之外的任意一个字符。同样的道理，虽然可以匹配其中任意一个，但是只能是一个，不是多个。

例如：

<pre><code>[ab5@] ：匹配 "a" 或 "b" 或 "5" 或 "@"

[^abc]：匹配 "a","b","c" 之外的任意一个字符

[f-k]：匹配 "f"~"k" 之间的任意一个字母

[^A-F0-3]：匹配 "A"~"F","0"~"3" 之外的任意一个字符

</code></pre>()的用法

括号的作用，其实三言两语就能说明白，括号提供了分组，便于我们引用它。

<ol>

<li>分组和分支结构</li>

</ol>

这二者是括号最直接的作用，也是最原始的功能。

1.1 分组

我们知道/a+/匹配连续出现的“a”，而要匹配连续出现的“ab”时，需要使用/(ab)+/。

其中括号是提供分组功能，使量词“+”作用于“ab”这个整体，测试如下：

<pre><code>var regex = /(ab)+/g;

var string = "ababa abbb ababab";

console.log( string.match(regex) ); // ["abab", "ab", "ababab"]

</code></pre>1.2 分支结构

而在多选分支结构(p1|p2)中，此处括号的作用也是不言而喻的，提供了子表达式的所有可能

比如，要匹配如下的字符串：

<pre><code>I love honglingbo

I love bobojie

</code></pre>可以使用正则：

<pre><code>var regex = /^I love (honglingbo|bobojie)$/;

console.log( regex.test("I love honglingbo") ); // true

console.log( regex.test("I love bobojie") ); // true

</code></pre>如果去掉正则中的括号，即/^I love honglingbo|bobojie$/，匹配字符串是”I love JavaScript”和”Regular Expression”，当然这不是我们想要的。

</ol>

是括号一个重要的作用，有了它，我们就可以进行数据提取，以及更强大的替换操作。

而要使用它带来的好处，必须配合使用实际环境的API。

以日期为例。假设格式是yyyy-mm-dd的，我们可以先写一个简单的正则：

<pre><code>var regex = /\d{4}-\d{2}-\d{2}/;

</code></pre>然后再修改成括号版的：

<pre><code>var regex = /(\d{4})-(\d{2})-(\d{2})/;

</code></pre>2.1 提取数据

比如提取出年、月、日，可以这么做：

<pre><code>var regex = /(\d{4})-(\d{2})-(\d{2})/;

var string = "2017-06-12";

console.log( string.match(regex) );

// => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]

</code></pre>match返回的一个数组，第一个元素是整体匹配结果，然后是各个分组（括号里）匹配的内容，然后是匹配下标，最后是输入的文本。（注意：如果正则是否有修饰符g，match返回的数组格式是不一样的）。

另外也可以使用正则对象的exec方法：

<pre><code>var regex = /(\d{4})-(\d{2})-(\d{2})/;

var string = "2017-06-12";

console.log( regex.exec(string) );

// => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]

</code></pre>同时，也可以使用构造函数的全局属性$1至$9来获取：

<pre><code>var regex = /(\d{4})-(\d{2})-(\d{2})/;

var string = "2017-06-12";

console.log(RegExp.$1); // "2017"

console.log(RegExp.$2); // "06"

console.log(RegExp.$3); // "12"

</code></pre>2.2 替换

比如，想把yyyy-mm-dd格式，替换成mm/dd/yyyy怎么做？

<pre><code>var regex = /(\d{4})-(\d{2})-(\d{2})/;

var string = "2017-06-12";

var result = string.replace(regex, "$2/$3/$1");

console.log(result); // "06/12/2017"

</code></pre>其中replace中的，第二个参数里用$1、$2、$3指代相应的分组。等价于如下的形式：

<pre><code>var regex = /(\d{4})-(\d{2})-(\d{2})/;

var string = "2017-06-12";

var result = string.replace(regex, function() {

return RegExp.$2 + "/" + RegExp.$3 + "/" + RegExp.$1;

});

console.log(result); // "06/12/2017"

</code></pre>也等价于：

<pre><code>var regex = /(\d{4})-(\d{2})-(\d{2})/;

var string = "2017-06-12";

var result = string.replace(regex, function(match, year, month, day) {

return month + "/" + day + "/" + year;

});

console.log(result); // "06/12/2017"

</code></pre><ol start="3">

</ol>

除了使用相应API来引用分组，也可以在正则本身里引用分组。但只能引用之前出现的分组，即反向引用。

还是以日期为例。

比如要写一个正则支持匹配如下三种格式：

<pre><code>2016-06-12

2016/06/12

2016.06.12

</code></pre>最先可能想到的正则是:

<pre><code>var regex = /\d{4}(-|\/|\.)\d{2}(-|\/|\.)\d{2}/;

var string1 = "2017-06-12";

var string2 = "2017/06/12";

var string3 = "2017.06.12";

var string4 = "2016-06/12";

console.log( regex.test(string1) ); // true

console.log( regex.test(string2) ); // true

console.log( regex.test(string3) ); // true

console.log( regex.test(string4) ); // true

</code></pre>其中/和.需要转义。虽然匹配了要求的情况，但也匹配”2016-06/12”这样的数据。

假设我们想要求分割符前后一致怎么办？此时需要使用反向引用：

<pre><code>var regex = /\d{4}(-|\/|\.)\d{2}\1\d{2}/;

var string1 = "2017-06-12";

var string2 = "2017/06/12";

var string3 = "2017.06.12";

var string4 = "2016-06/12";

console.log( regex.test(string1) ); // true

console.log( regex.test(string2) ); // true

console.log( regex.test(string3) ); // true

console.log( regex.test(string4) ); // false

</code></pre>注意里面的\1，表示的引用之前的那个分组(-|\/|.)。不管它匹配到什么（比如-），\1都匹配那个同样的具体某个字符。

我们知道了\1的含义后，那么\2和\3的概念也就理解了，即分别指代第二个和第三个分组。

看到这里，此时，恐怕你会有三个问题。

括号嵌套怎么办？

以左括号（开括号）为准。比如：

<pre><code>var regex = /^((\d)(\d(\d)))\1\2\3\4$/;

var string = "1231231233";

console.log( regex.test(string) ); // true

console.log( RegExp.$1 ); // 123

console.log( RegExp.$2 ); // 1

console.log( RegExp.$3 ); // 23

console.log( RegExp.$4 ); // 3

</code></pre>我们可以看看这个正则匹配模式：

第一个字符是数字，比如说1，

第二个字符是数字，比如说2，

第三个字符是数字，比如说3，

接下来的是\1，是第一个分组内容，那么看第一个开括号对应的分组是什么，是123，

接下来的是\2，找到第2个开括号，对应的分组，匹配的内容是1，

接下来的是\3，找到第3个开括号，对应的分组，匹配的内容是23，

最后的是\4，找到第3个开括号，对应的分组，匹配的内容是3。

这个问题，估计仔细看一下，就该明白了。

3.2 \10表示什么呢？

另外一个疑问可能是，即\10是表示第10个分组，还是\1和0呢？答案是前者，虽然一个正则里出现\10比较罕见。测试如下：

<pre><code>var regex = /(1)(2)(3)(4)(5)(6)(7)(8)(9)(#) \10+/;

var string = "123456789# ######"

console.log( regex.test(string) );

</code></pre>3.3 引用不存在的分组会怎样？

因为反向引用，是引用前面的分组，但我们在正则里引用了不存在的分组时，此时正则不会报错，只是匹配反向引用的字符本身。例如\2，就匹配”\2”。注意”\2”表示对2进行了转意。

<pre><code>var regex = /\1\2\3\4\5\6\7\8\9/;

console.log( regex.test("\1\2\3\4\5\6\7\8\9") ); //true

</code></pre><ol start="4">

<li>非捕获分组</li>

</ol>

之前文中出现的分组，都会捕获它们匹配到的数据，以便后续引用，因此也称他们是捕获型分组。

如果只想要括号最原始的功能，但不会引用它，即，既不在API里引用，也不在正则里反向引用。此时可以使用非捕获分组(?:p)，例如本文第一个例子可以修改为：

<pre><code>var regex = /(?:ab)+/g;

var string = "ababa abbb ababab";

console.log( string.match(regex) ); // ["abab", "ab", "ababab"]

</code></pre><ol start="5">

</ol>

至此括号的作用已经讲完了，总结一句话，就是提供了可供我们使用的分组，如何用就看我们的了。

5.1 字符串trim方法模拟

trim方法是去掉字符串的开头和结尾的空白符。有两种思路去做。

第一种，匹配到开头和结尾的空白符，然后替换成空字符。如：

<pre><code>function trim(str) {

return str.replace(/^\s+|\s+$/g, '');

}

console.log( trim(" foobar ") ); // "foobar"

</code></pre>第二种，匹配整个字符串，然后用引用来提取出相应的数据：

<pre><code>function trim(str) {

return str.replace(/^\s*(.*?)\s*$/g, "$1");

}

console.log( trim(" foobar ") ); // "foobar"

</code></pre>这里使用了惰性匹配*?，不然也会匹配最后一个空格之前的所有空格的。

当然，前者效率高。

5.2 将每个单词的首字母转换为大写

<pre><code>function titleize(str) {

return str.toLowerCase().replace(/(?:^|\s)\w/g, function(c) {

return c.toUpperCase();

});

}

console.log( titleize('my name is epeli') ); // "My Name Is Epeli"

</code></pre>思路是找到每个单词的首字母，当然这里不使用非捕获匹配也是可以的。

5.3 驼峰化

<pre><code>function camelize(str) {

return str.replace(/[-_\s]+(.)?/g, function(match, c) {

return c ? c.toUpperCase() : '';

});

}

console.log( camelize('-moz-transform') ); // MozTransform

</code></pre>首字母不会转化为大写的。其中分组(.)表示首字母，单词的界定，前面的字符可以是多个连字符、下划线以及空白符。正则后面的?的目的，是为了应对str尾部的字符可能不是单词字符，比如str是’-moz-transform ‘。

5.4 中划线化

<pre><code>unction dasherize(str) {

return str.replace(/([A-Z])/g, '-$1').replace(/[-_\s]+/g, '-').toLowerCase();

}

console.log( dasherize('MozTransform') ); // -moz-transform

</code></pre>驼峰化的逆过程。

5.5 html转义和反转义

<pre><code>// 将HTML特殊字符转换成等值的实体

function escapeHTML(str) {

var escapeChars = {

'¢' : 'cent',

'£' : 'pound',

'¥' : 'yen',

'€': 'euro',

'©' :'copy',

'®' : 'reg',

'<' : 'lt',

'>' : 'gt',

'"' : 'quot',

'&' : 'amp',

'\'' : '#39'

};

return str.replace(new RegExp('[' + Object.keys(escapeChars).join('') +']', 'g'), function(match) {

return '&' + escapeChars[match] + ';';

});

}

console.log( escapeHTML('<div>Blah blah blah</div>') );

// => &lt;div&gt;Blah blah blah&lt;/div&gt;

</code></pre>其中使用了用构造函数生成的正则，然后替换相应的格式就行了，这个跟本文没多大关系。

倒是它的逆过程，使用了括号，以便提供引用，也很简单，如下：

<pre><code>// 实体字符转换为等值的HTML。

function unescapeHTML(str) {

var htmlEntities = {

nbsp: ' ',

cent: '¢',

pound: '£',

yen: '¥',

euro: '€',

copy: '©',

reg: '®',

lt: '<',

gt: '>',

quot: '"',

amp: '&',

apos: '\''

};

return str.replace(/\&([^;]+);/g, function(match, key) {

if (key in htmlEntities) {

return htmlEntities[key];

}

return match;

});

}

console.log( unescapeHTML('&lt;div&gt;Blah blah blah&lt;/div&gt;') );

// => <div>Blah blah blah</div>

</code></pre>通过key获取相应的分组引用，然后作为对象的键。

5.6 匹配成对标签

要求匹配：

<pre><code><title>regular expression</title>

laoyao bye bye

</code></pre>不匹配：

<pre><code><title>wrong!

</code></pre>匹配一个开标签，可以使用正则<[^>]+>，

匹配一个闭标签，可以使用<\/[^>]+>，

但是要求匹配成对标签，那就需要使用反向引用，如：

<pre><code>var regex = /<([^>]+)>[\d\D]*<\/\1>/;

var string1 = "<title>regular expression</title>";

var string2 = "laoyao bye bye";

var string3 = "<title>wrong!";

console.log( regex.test(string1) ); // true

console.log( regex.test(string2) ); // true

console.log( regex.test(string3) ); // false

</code></pre>其中开标签<[^>]+>改成<([^>]+)>，使用括号的目的是为了后面使用反向引用，而提供分组。闭标签使用了反向引用，<\/\1>。

另外[\d\D]的意思是，这个字符是数字或者不是数字，因此，也就是匹配任意字符的意思。

正则表达式中(括号) [方括号] {大括号}的区别

<ul>

<li>括号() ：括号是多个匹配，它把括号内的当做一组来处理，限制一些多选的范围，比如上面的需求只能是com cn net结尾的用括号就是最好的选择。 括号能提取字符串，如(com|cn|net)就可以限制，只能是com或cn或net。 括号将括号里面的内容作为一组，这就是与[]不同的地方。</li>

<li>方括号[]：方括号是单个匹配，如[abc]他限制的不是abc连续出现，而是只能是其中一个，这样写那么规则就是找到这个位置时只能是a或是b或是c； 方括号是正则表达式中最常用的，常用的用法有：[a-zA-Z0-9]匹配所有英文字母和数字，a-zA-Z0-9匹配所有非英文字母和数字。</li>

<li>大括号{}：大括号的用法很简单，就是匹配次数，它需要和其他有意义的正则表达式一起使用。 比如[a-c]{2}意思就是匹配a-c之间的一个字母出现且只出现两次； 比如(com){1}意思就是com必须出现一次 比如\W{1,3}意思就是非字母数字最少出现一次最多出现3次。</li>

</ul>

贪婪与非贪婪模式

概述

贪婪与非贪婪模式影响的是被量词修饰的子表达式的匹配行为，贪婪模式在整个表达式匹配成功的前提下，尽可能多的匹配，而非贪婪模式在整个表达式匹配成功的前提下，尽可能少的匹配。非贪婪模式只被部分NFA引擎所支持。

属于贪婪模式的量词，也叫做匹配优先量词，包括：

{m,n}、{m,}、?、*和+。

在一些使用NFA引擎的语言中，在匹配优先量词后加上“?”，即变成属于非贪婪模式的量词，也叫做忽略优先量词，包括：

{m,n}?、{m,}?、??、*?和+?。

从正则语法的角度来讲，被匹配优先量词修饰的子表达式使用的就是贪婪模式，如“(Expression)+”；被忽略优先量词修饰的子表达式使用的就是非贪婪模式，如“(Expression)+?”。

对于贪婪模式，各种文档的叫法基本一致，但是对于非贪婪模式，有的叫懒惰模式或惰性模式，有的叫勉强模式，其实叫什么无所谓，只要掌握原理和用法，能够运用自如也就是了。个人习惯使用贪婪与非贪婪的叫法

这两种模式如下图所示：

贪婪非贪婪意　　义（X为表达式） X? X?? 匹配 X 零次或一次 X X? 匹配 X 零次或多次 X+ X+? 匹配 X 一次或多次 X{n,} X{n,}? 匹配 X 至少 n 次 X{n,m} X{n,m}? 匹配 X 至少 n 次，但不多于 m 次

看下一个例子，假定要分析的字符串是xfooxxxxxxfoo

<ul>

<li>贪婪模式: 最大匹配方式。模式分为子模式p1(.*)和子模式p2(foo)两个部分. 其中p1中的量词匹配方式使用默认方式(贪婪型)。匹配开始时,吃入所有字符xfooxxxxxx去匹配子模式p1。匹配成功,但这样以来就没有了字符串去匹配子模式p2。本轮匹配失败；第二轮：减少p1部分的匹配量，吐出最后一个字符, 把字符串分割成xfooxxxxxxfo和o两个子字符串s1和s2。 s1匹配p1, 但s2不匹配p2。本轮匹配失败；第三轮，再次减少p1部分匹配量，吐出两个字符, 字符串被分割成xfooxxxxxxfo和oo两部分。结果同上。第四轮，再次减少p1匹配量, 字符串分割成xfooxxxxxx和foo两个部分, 这次s1/s2分别和p1/p2匹配。停止尝试,返回匹配成功。<pre><code>var regex = /.*foo/;

var string = "xfooxxxxxxfoo";

console.log( string.match(regex) ); //xfooxxxxxxfoo

</code></pre></li>

<li>非贪婪模式: 最小匹配方式。第一次尝试匹配, p1由于是0或任意次，因此被忽略，用字符串去匹配p2,失败；第二次，读入第一个字符x, 尝试和p1匹配, 匹配成功; 字符串剩余部分fooxxxxxxfoo中前三个字符和p2也是匹配的. 因此, 停止尝试, 返回匹配成功。在这种模式下，如果对剩余字符串继续去寻找和模式相匹配的子字符串，还会找到字符串末尾的另一个xfoo，而在贪婪模式下，由于第一次匹配成功的子串就已经是所有字符，因此不存在第二个匹配子串。<pre><code>var regex = /.*?foo/;

var string = "xfooxxxxxxfoo";

console.log( string.match(regex) ); //xfoo

</code></pre></li>

</ul>

JavaScript RegExp 对象

正则表达式是描述字符模式的对象。

正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

语法

<pre><code>var patt=new RegExp(pattern,modifiers);

或者更简单的方式:

var patt=/pattern/modifiers;

</code></pre><ul>

<li>pattern（模式）描述了表达式的模式</li>

<li>modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配</li>

</ul>

注意：当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）。比如，以下是等价的：

<pre><code>var re = new RegExp("\\w+");

var re = /\w+/;

</code></pre>例如：

<pre><code>var re = new RegExp("\\w+");

re.test("abc");//true

/\w+\.test("abc");//true

</code></pre>修饰符

修饰符用于执行区分大小写和全局匹配:

修饰符描述 i 执行对大小写不敏感的匹配。 g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 m 执行多行匹配。

exec()

exec() 方法用于检索字符串中的正则表达式的匹配。

如果字符串中有匹配的值返回该匹配值，否则返回 null。

语法：

RegExpObject.exec(string)

例子:

<pre><code>var str="Hello world!";

//查找"Hello"

var patt=/Hello/g;

console.log(patt.exec(str)); //Hello

</code></pre>test()

test() 方法用于检测一个字符串是否匹配某个模式.

如果字符串中有匹配的值返回 true ，否则返回 false。

语法：

RegExpObject.test(string)

例子:

<pre><code>var str="Hello world!";

//查找"Hello"

var patt=/Hello/g;

console.log(patt.test(str)); //true

</code></pre>match()

找到一个或多个正则表达式的匹配。

语法：

string.match(regexp)

例子:

<pre><code>有修饰符g

var str="The rain in SPAIN stays mainly in the plain";

console.log(str.match(/ain/g));//"ain", "ain", "ain"

没有修饰符g

var str="The rain in SPAIN stays mainly in the plain";

console.log(str.match(/ain/));//"ain"

</code></pre>注意： match() 方法将检索字符串 String Object，以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本， match() 将返回 null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。

</div>

</footer>

</div>

</article>

Posted on

2017-02-27

</time>

</div>

</header>

<h1 id="vue2-webpack2-搭建项目"><a href="#vue2-webpack2-搭建项目" class="headerlink" title="vue2+webpack2 搭建项目"></a>vue2+webpack2 搭建项目</h1>背景： 不是vue入门也不是webpack入门，做过vue项目的基础上，独立搭建项目环境。

<hr>

<ul>

<li><h2 id="webpack2-：从webpack开始，熟悉webpack功能"><a href="#webpack2-：从webpack开始，熟悉webpack功能" class="headerlink" title="webpack2 ：从webpack开始，熟悉webpack功能"></a>webpack2 ：从webpack开始，熟悉webpack功能</h2></li>

</ul>

使用准备：新建文件夹-如：test

<pre><code>终端中输入 npm init

输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，如此，package.json文件已经就绪

安装webpack： npm install --save-dev webpack

随之出现 node_modules 文件夹

</code></pre>回到之前的空文件夹，并在里面创建两个文件夹，app文件夹和public文件夹。

++app文件夹++用来存放原始数据和我们将写的JavaScript模块，

++build++用来存放准备给浏览器读取的数据（包括使用webpack生成的打包后的js文件以及一个index.html文件）。

在这里还需要创建三个文件，index.html文件放在build文件夹中，两个js文件（Greeter.js和main.js）放在app文件夹中。

此时项目结构如下所示 <img src="https://github.com/githubcandybabe/githubcandybabe.github.io/blob/master/images/vue1.jpeg?raw=true" alt="image">

index.html文件只有最基础的html代码，它唯一的目的就是加载打包后的js文件

main.js用来把hello模块返回的节点插入页面。

hello.js只包括一个用来返回包含问候信息的html元素的函数。

<h3 id="正式使用Webpack"><a href="#正式使用Webpack" class="headerlink" title="正式使用Webpack"></a>正式使用Webpack</h3><h4 id="使用命令启用webpack"><a href="#使用命令启用webpack" class="headerlink" title="使用命令启用webpack"></a>使用命令启用webpack</h4>webpack可以在终端中使用，其最基础的命令是

<figure class="highlight plain"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>webpack {entry file/入口文件} {destination for bundled file/存放index.js的地方} </pre></td></tr></table></figure>

只需要指定一个入口文件，webpack将自动识别项目所依赖的其它文件，不过需要注意的是如果webpack没有进行全局安装，那么当你在终端中使用此命令时，需要额外指定其在node_modules中的地址，继续上面的例子，在终端中属于如下命令

<figure class="highlight plain"><table><tr><td class="gutter"><pre>1 2 </pre></td><td class="code"><pre>//webpack非全局安装的情况 node_modules/.bin/webpack app/main.js build/index.js </pre></td></tr></table></figure>

结果如下 <img src="https://github.com/githubcandybabe/githubcandybabe.github.io/blob/master/images/vue2.jpeg?raw=true" alt="image">

webpack同时编译了main.js hello,js,现在打开index.html,可以看到如下结果

成功的使用Webpack打包了一个文件了。不过如果在终端中进行复杂的操作，还是不太方便且容易出错的，接下来看看Webpack的另一种使用方法。

<h4 id="通过配置文件来使用Webpack"><a href="#通过配置文件来使用Webpack" class="headerlink" title="通过配置文件来使用Webpack"></a>通过配置文件来使用Webpack</h4>Webpack拥有很多其它的比较高级的功能（比如loaders和plugins），这些功能其实都可以通过命令行模式实现。

定义一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，可以把所有的与构建相关的信息放在里面。

还是继续上面的例子来说明如何写这个配置文件，在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件，并在其中进行最最简单的配置，如下所示，它包含入口文件路径和存放打包后文件的地方的路径。

<pre><code>注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

</code></pre>现在如果你需要打包文件只需要在终端里你运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了，这条命令会自动参考webpack.config.js文件中的配置选项打包你的项目，输出结果如下

<h4 id="更快捷的执行打包任务"><a href="#更快捷的执行打包任务" class="headerlink" title="更快捷的执行打包任务"></a>更快捷的执行打包任务</h4>npm可以引导任务执行，对其进行配置后可以使用简单的npm start命令来代替这些繁琐的命令。在package.json中对npm的脚本部分进行相关设置即可，设置方法如下

<figure class="highlight plain"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 </pre></td><td class="code"><pre>{ "name": "test", "version": "1.0.0", "description": "test", "scripts": { "start": "webpack" //配置的地方就是这里啦，相当于把npm的start命令指向webpack命令 }, "author": "can", "license": "ISC", "devDependencies": { "webpack": "^2.12.9" } } </pre></td></tr></table></figure>

npm的start是一个特殊的脚本名称，它的特殊性表现在，在命令行中使用npm start就可以执行相关命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build，以下是执行npm start后命令行的输出显示

<h3 id="使用webpack构建本地服务器"><a href="#使用webpack构建本地服务器" class="headerlink" title="使用webpack构建本地服务器"></a>使用webpack构建本地服务器</h3>想要页面跑起来，服务器少不了。

在webpack中进行配置之前需要单独安装它作为项目依赖

<figure class="highlight plain"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>npm install --save-dev webpack-dev-server </pre></td></tr></table></figure>

devserver作为webpack配置选项中的一项，具有以下配置选项

继续把这些命令加到webpack的配置文件中，现在的配置文件如下所示

<figure class="highlight plain"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 </pre></td><td class="code"><pre>module.exports = { entry: __dirname + "/app/main.js", output: { path: __dirname + "/build", filename: "index.js" }, devServer: { contentBase:"./build",//本地服务器所加载的页面所在的目录 colors: true,//终端中输出结果为彩色 historyApiFallback: true,//不跳转 inline: true//实时刷新 } } </pre></td></tr></table></figure>

为了展示一下webpack-dev-server的功能，我们在此对webpack.config.js和package.json做了修改

<figure class="highlight plain"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </pre></td><td class="code"><pre>//webpack.config.js var webpack = require('webpack'); var webpackDevServer = require('webpack-dev-server'); module.exports = { entry: __dirname + "/app/main.js", output: { path: __dirname + "/build", filename: "index.js" }, devServer: { contentBase:"./build",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 inline: true//实时刷新 } } </pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </pre></td><td class="code"><pre>//package.json { "name": "test", "version": "1.0.0", "description": "test", "scripts": { "start": "webpack" //配置的地方就是这里啦，相当于把npm的start命令指向webpack命令 "dev" : "webpack-dev-server --inline --hot" }, "author": "can", "license": "ISC", "devDependencies": { "webpack": "^2.12.9" } } </pre></td></tr></table></figure>

终端中输入 npm run dev

浏览器中打开 localhost:8080/index.html

<h3 id="HtmlWebpackPlugin"><a href="#HtmlWebpackPlugin" class="headerlink" title="HtmlWebpackPlugin"></a>HtmlWebpackPlugin</h3>这个插件的作用是依据一个简单的模板，帮你生成最终的Html5文件，这个文件中自动引用了你打包后的JS文件。每次编译都在文件名中插入一个不同的哈希值。

安装 <figure class="highlight plain"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>npm install --save-dev html-webpack-plugin </pre></td></tr></table></figure>

这个插件自动完成了我们之前手动做的一些事情，在正式使用之前需要对一直以来的项目结构做一些改变：

<ul>

<li>移除build文件夹中index.html至app目录，利用此插件，HTML5文件会自动生成。

</li>

<li>在app目录下，修改index.html，模板源代码如下

</li>

</ul>

在webpack.config.js中进行配置：

在终端输入

浏览器中可看到如图 <img src="https://github.com/githubcandybabe/githubcandybabe.github.io/blob/master/images/vue8.jpeg?raw=true" alt="image">

<h3 id="webpack的loaders"><a href="#webpack的loaders" class="headerlink" title="webpack的loaders"></a>webpack的loaders</h3>通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理

Loaders需要单独安装（此处示范json的loader）

<figure class="highlight plain"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>npm install --save-dev json-loader </pre></td></tr></table></figure>

安装后在webpack.config.js下的modules关键字下进行配置

Loaders的配置选项包括以下几方面：

<ul>

<li>test：一个匹配loaders所处理的文件的拓展名的正则表达式（必须）</li>

<li>loader：loader的名称（必须） –++webpack2中loader不能简写++，已入过坑</li>

<li>include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；</li>

<li>query：为loaders提供额外的设置选项（可选）</li>

</ul>

loaders 需要用到再装，用什么装什么！

<h3 id="Babel"><a href="#Babel" class="headerlink" title="Babel"></a>Babel</h3>Babel是一个编译JavaScript的平台，它的强大之处表现在可以通过编译帮你达到以下目的：

<ul>

<li>下一代的JavaScript标准（ES6，ES7），这些标准目前并未被当前的浏览器完全的支持；</li>

<li>使用基于JavaScript进行了拓展的语言，比如React的JSX</li>

</ul>

View remainder of file in raw view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

index.html

Latest commit

History

index.html

File metadata and controls