雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码
分享到：

前端之旅 第9页

去分类设置中添加分类描述吧

NodeJS多进程试用

2019-10-12admin阅读(1721)评论(0)

NodeJS的JavaScript运行在单个进程的单个线程上，一个JavaScript执行进程只能利用一个CPU核心，而如今大多数CPU均为多核CPU，为了充分利用CPU资源，Node提供了child_process和cluster模块来实现多进程以及进程管理。本文将根据Master-Worker模式，搭建一个简单的服务器集群来充分利用多核CPU资源，探索进程间通信、负载均衡、进程重启等知识。

下图是Master-Worker模式，进程分为master进程和worker进程，master进程负责调度或管理worker进程，worker进程则负责具体的业务处理。在服务器层面，worker可以是一个服务进程，负责处理来自客户端的请求，多个worker便相当于多个服务器，从而构成一个服务器集群。master则是负责创建worker，将来自客户端的请求分配到各个服务器上去处理，并监控worker的运行状态以及进行管理等操作。

20180411162337266

child_process模块提供了spawn()、exec()、execFile()、fork()这4个方法用于创建子进程，本文将使用fork()方法来创建子进程，fork()方法只需指定要执行的JavaScript文件模块，即可创建Node的子进程。下面是简单的HelloWorld示例，master进程根据CPU数量创建出相应数量的worker进程，worker进程中利用进程ID来标记自己。

父进程:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
* Created by PhpStorm.
* User:  iyahe@qq.com (天明)
* Date: 2019/10/12 0012
* Time: 下午 15:32
* Description:
*/
const childProcess = require('child_process');
const cpuNum = require('os').cpus().length;
console.log('CPU个数',cpuNum);
for (let i = 0; i < cpuNum*10; ++i) {
let worker = childProcess.fork('./write.js');
        // 给子进程发消息
worker.send(JSON.stringify({id: i}));
worker.on('message', (msg) => {
console.log('我是父进程 我收到了 : ' + msg)
})
}

子进程:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
* Created by PhpStorm.
* User:  iyahe@qq.com (天明)
* Date: 2019/10/12 0012
* Time: 下午 15:46
* Description:
*/
const os = require('os');
var fs = require("fs");
const thatPid = process.pid;
const files = process.cwd() +'/logs/' + thatPid + '.log';
const times = (new Date()).getTime() + '\n';
const startTime = (new Date()).getTime();
const maxLen = 1000;
process.on('message', (msg) => {
console.log('子进程收到消息: ' + msg)
});
for (var i = 0; i < maxLen; i++) {
fs.appendFileSync(files, times);
}
let allTime = (new Date()).getTime()-startTime;
// 给父进程发消息
process.send(thatPid + 'jin: Hi master. 我处理完了: 写入' + maxLen + '次, 一共耗时: ' + allTime + 'ms')

log输出内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
我是父进程 我收到了 : 8800jin: Hi master. 我处理完了: 写入1000次, 一共耗时: 869ms
我是父进程 我收到了 : 11984jin: Hi master. 我处理完了: 写入1000次, 一共耗时: 1082ms
我是父进程 我收到了 : 11504jin: Hi master. 我处理完了: 写入1000次, 一共耗时: 1264ms
我是父进程 我收到了 : 14756jin: Hi master. 我处理完了: 写入1000次, 一共耗时: 1473ms
我是父进程 我收到了 : 12772jin: Hi master. 我处理完了: 写入1000次, 一共耗时: 1669ms
我是父进程 我收到了 : 4064jin: Hi master. 我处理完了: 写入1000次, 一共耗时: 1100ms
我是父进程 我收到了 : 7860jin: Hi master. 我处理完了: 写入1000次, 一共耗时: 1337ms
我是父进程 我收到了 : 12388jin: Hi master. 我处理完了: 写入1000次, 一共耗时: 1030ms
我是父进程 我收到了 : 12216jin: Hi master. 我处理完了: 写入1000次, 一共耗时: 1017ms
我是父进程 我收到了 : 12784jin: Hi master. 我处理完了: 写入1000次, 一共耗时: 1089ms
我是父进程 我收到了 : 6652jin: Hi master. 我处理完了: 写入1000次, 一共耗时: 989ms
我是父进程 我收到了 : 12980jin: Hi master. 我处理完了: 写入1000次, 一共耗时: 779ms
我是父进程 我收到了 : 9960jin: Hi master. 我处理完了: 写入1000次, 一共耗时: 978ms
.....

还是挺好用的,看这执行情况, 应该比php效率更高~~~

webstorm/phpstorm提示TypeError: this.cliEngine is not a constructor解决方案

2019-10-10admin阅读(5433)评论(0)

TypeError: this.cliEngine is not a constructor

报错:

1
2
3
4
5
6
7
8
9
10
11
12
TypeError: this.cliEngine is not a constructor
    at ESLintPlugin.invokeESLint (/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:25)
    at ESLintPlugin.getErrors (/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:76:21)
    at ESLintPlugin.onMessage (/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:42:29)
    at Interface.<anonymous> (/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/jsLanguageServicesImpl/js-language-service.js:105:39)
    at Interface.emit (events.js:189:13)
    at Interface._onLine (readline.js:290:10)
    at Interface._normalWrite (readline.js:433:12)
    at Socket.ondata (readline.js:149:10)
    at Socket.emit (events.js:189:13)
    at addChunk (_stream_readable.js:284:12)
Process finished with exit code -1

修改这个文件/Applications/WebStorm.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js

1
2
// this.cliEngine = require(packagePath + "lib/cli-engine");
this.cliEngine = require(packagePath + "lib/cli-engine").CLIEngine;

重启webstorm/phpstorm就可以了

使用 nodeJs 递归拷贝一个目录到另一个目录

2019-10-10admin阅读(3812)评论(0)

使用 nodeJs 递归拷贝一个目录到另一个目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/**
* Created by PhpStorm.
* User:  iyahe@qq.com (天明)
* Date: 2019/10/10 0010
* Time: 上午 10:34
* Description:
*/
const fs = require('fs')
/**
* 允许被复制的文件后缀列表
* @type {string[]}
*/
const copyExt = ['.html', '.php']
/**
* 复制一个文件夹下的文件到另一个文件夹
* @param src 源文件夹
* @param dst 目标文件夹
*/
const copyDir = function (src, dst) {
  // 读取目录中的所有文件/目录
  fs.readdir(src, function (err, paths) {
    if (err) {
      throw err
    }
    paths.forEach(function (path) {
      const _src = src + '/' + path
      const _dst = dst + '/' + path
      let readable; let writable
      fs.stat(_src, function (err, st) {
        if (err) {
          throw err
        }
        // 判断是否为文件
        if (st.isFile()) {
          // 允许的后缀才可以被复制
          if (contains(copyExt, _src)) {
            // 创建读取流
            readable = fs.createReadStream(_src)
            // 创建写入流
            writable = fs.createWriteStream(_dst)
            // 通过管道来传输流
            readable.pipe(writable)
          } else {
            // console.log(_src + ' 不允许被复制!!!')
          }
        }
        // 如果是目录则递归调用自身
        else if (st.isDirectory()) {
          exists(_src, _dst, copyDir)
        }
      })
    })
  })
}
/**
* 在复制目录前需要判断该目录是否存在，
* 不存在需要先创建目录
* @param src
* @param dst
* @param callback
*/
const exists = function (src, dst, callback) {
  // 如果路径存在，则返回 true，否则返回 false。
  if (fs.existsSync(dst)) {
    callback(src, dst)
  } else {
    fs.mkdir(dst, function () {
      callback(src, dst)
    })
  }
}
/**
* 判断数组中的元素是否包含此字符串
* @param arr
* @param obj
* @returns {boolean}
*/
const contains = function (arr, obj) {
  let flag = false
  arr.map((val) => {
    if (obj.includes(val)) {
      flag = true
    }
  })
  return flag
}
// 复制目录
exists('./dist/', './m.soyoung.com/protected/views/topic/', copyDir)

 

js 如何获取input框选择视频的首帧图

2019-09-22admin阅读(2358)评论(0)

这个功能经常用到, 代码逻辑记录一下:

首选我们在change事件之后操作:

1
2
3
4
5
6
7
8
let files = file.target.files;
if (files.length > 0) {
  let img = new Image();
  this.thumbUrl = img.src = URL.createObjectURL(files[0]);
  setTimeout(()=> {
    this.viedoFirst(files[0]);
  })
}

viedoFirst 方法:

1
2
3
4
5
6
7
8
9
10
11
viedoFirst (files) {
  var scale = 0.8;
  var video = document.getElementById("videoHide");
  video.addEventListener('loadeddata', () => {
    var canvas = document.createElement("canvas");
    canvas.width = video.videoWidth * scale;
    canvas.height = video.videoHeight * scale;
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    this.firstBaseData = canvas.toDataURL("image/png");
  });
},

最终视频的首帧图已经保存在我们 this.firstBaseData 里面了, 简单效果如下:

Snipaste_2019-09-22_00-00-19

这是刚从视频获取到的首帧图!

Electron和React结合开发代理IP获取及检测工具

2019-08-05admin阅读(1994)评论(0)

近期, 为了学习React相关知识,简单开发了一个小工具, 使用的技术栈是:

Electron + React + PHP, UI框架使用了element, 大概长这样!

Snipaste_2019-08-05_11-46-34

具体的开发思路如下

首先我使用react启动服务, 然后使用 Electron 打开服务URL,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 1237,
    height: 760,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      javascript: true,
      plugins: true,
      nodeIntegration: true, // 是否集成 Nodejs
      webSecurity: false,
    }
  })
  // and load the index.html of the app.
  // mainWindow.loadFile('index.html')
  if (isModel) {
    mainWindow.loadURL(url.format({
      pathname: path.join(__dirname, './build/index.html'),
      protocol: 'file:',
      slashes: true
    }))
  } else {
    mainWindow.loadURL('http://localhost:3000/')
  }
  // TODO 打开控制台
  mainWindow.webContents.openDevTools()
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
  winApp.init(mainWindow, app)
}
app.on('ready', createWindow)

当借口请求完成之后, 循环代理IP, 使用 Electron 的 remote 来动态调用 Electron 里面定义的检测服务! 检测完成之后, 挨个更新 数据, 显示结果

1
2
3
4
5
6
7
8
9
10
checkProxyFun (val, index) {
const remote = window.electron.remote;
let testUrl = 'https://www.baidu.com/';
remote.app.proxyTest(testUrl,'http://'+val.proxy)
.then((res,body,head)=> {
this.setProxy(index,'check_result', 1)
}).catch(e =>{
this.setProxy(index,'check_result',2)
});
}

remote 方法定义如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/**
* Created by PhpStorm.
* User:  iyahe@qq.com (天明)
* Date: 2019/8/1 0001
* Time: 下午 18:10
* Description:
*/
var request = require('superagent');
var agents = require('./config/ua')
require('superagent-proxy')(request);
let proxy = {
init (web, app) {
// TODO 挂载方法到 app 模块上，供 remote 模块使用
app.proxyTest = function (
$url, $proxy = '', $option = {
timeout: {
response: 3000,
deadline: 6000
}
}) {
// TODO 随机获取一个ua
let userAgent = agents[parseInt(Math.random() * agents.length)];
return new Promise((resolve, reject) => {
request
.get($url)
.timeout($option.timeout)
.set({ 'User-Agent': userAgent })
.proxy($proxy)
.end(function (err, res) {
if (err) {
reject(err)
} else {
resolve(res.status, res.body, res.headers)
}
});
})
}
}
}
 
 
exports.default = proxy

目前项目只完成一半功能, 后面有时间, 再完善其他

项目地址: https://gitee.com/shala/Electron-React

react 项目初始化及路由嵌套

2019-06-12admin阅读(1737)评论(0)

我们使用 react脚手架create-react-app 来构建 react 项目;

一、安装 npm install -g create-react-app

二、创建react应用

create-react-app是全局命令来创建react项目

create-react-app 项目名称

创建成功后

Snipaste_2019-06-12_14-00-18

 

今天我们主要看看 路由及路由嵌套

我们新建一个router.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
* Created by PhpStorm.
* User:  iyahe@qq.com (天明)
* Date: 2019/6/11 0011
* Time: 下午 16:55
* Description:
*/
import React from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';
import Home from './views/home';
import Detail from './views/detail';
import Index from './views/index'
 
const BasicRoute = () => (
<HashRouter>
<Switch>
<Route exact path="/" component = {Index} />
<Route path="/home" component = {Home} />
<Route exact path="/detail/:id" component = {Detail} />
</Switch>
</HashRouter>
);
export default BasicRoute;

路由嵌套, 我们主要给Home路由嵌套子页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/**
* Created by PhpStorm.
* User:  iyahe@qq.com (天明)
* Date: 2019/6/11 0011
* Time: 下午 16:54
* Description:
*/
import React from 'react';
import { Route } from 'react-router-dom';
export const DetailsDef = (props) => {
return (
<div>
我在 home/abc/def 里
</div>
)
}
export const Details = (props) => {
return (
<div>
<p>详情内容子路由</p>
<a href='#/home/abc/def'>去->home/abc/def</a>
</div>
)
}
export default class Home extends React.Component {
render() {
return (
<div>
<a href='#/detail/30'>去detail</a>
<button onClick={() => this.props.history.push({
pathname: '/detail',
state: {
id: 3
}
})}>通过函数跳转</button>
<br/>
<a href='#/home/abc'>去home的子路由里面</a>
<div className="ids">
<Route path="/home/abc" component={Details}></Route>
<Route path="/home/abc/def" component={DetailsDef}></Route>
</div>
</div>
)
}
}

这样, 我们访问到: #/home/abc 时候, 加载 omponent={Details} 组件

访问到: home/abc/def, 加载 component={DetailsDef} 组件

c1b995420c2d3fe43768e95326bd5e9f722cb611

php 操作/使用 sqLite 数据库心路历程

2019-06-10admin阅读(2263)评论(0)

因为有些小的数据, 不想存在mysql太乱了, 所以想到了用 sqLite ,

查了一下, php连接sqLite 很简单, 而且 liunx 就内置了 sqLite  数据库,

直接在liunx输入 sqLite3 即可进入交互;

注意, 退出时候,需要先按.quit 才能退出…

新建数据库: sqlite3 tm.db;

然后使用php操作数据库!

首先我想到了万能的conmposer, 找到了一个php的ORM类!

轻量级的PHP数据库框架, 提高开发效率！

so easy 啊

1
2
3
4
5
6
7
8
9
$database = new medoo([
    'database_type' => 'sqlite',
    'database_file' => 'my/database/path/database.db'
]);
$database->insert("account", [
    "user_name" => "tianming",
    "email" => "iyahe@qq.com"
]);

注意: 这里因为命名空间的问题, 我是直接下载了文件, 没有使用composer, 类里面的 PDO 要改为 \PDO, 否则会找不到 PDO 扩展而报错

但是后来, 无意间看到

ThinkPHP内置了抽象数据库访问层，把不同的数据库操作封装起来，我们只需要使用公共的Db类进行操作，而无需针对不同的数据库写不同的代码和底层实现，Db类会自动调用相应的数据库驱动来处理。数据库抽象访问层基于PDO方式，目前内置包含了Mysql、SqlServer、PgSQL、Sqlite等数据库的支持。

…. 原来thinkphp早已经支持了.

那就查文档吧!

1
2
3
4
5
6
7
8
// 多个数据库配置
'db_speak' => [
// 数据库类型
'type'        => 'sqlite',
'database'       => APP_ROOT .'/public/db/speak.db', // 相对于入口文件的数据库文件路径
'prefix'         => '',
'debug'          => true
],

在database.php 里面新增一条数据库配置!

使用的时候 Db::connect(‘db_speak’) ->table($table)->xxx();

接下来的操作就是thinkphp内置orm的使用习惯了,

但是

SQLSTATE[HY000]: General error: 8 attempt to write a readonly database

 

报错了, 原来是数据库没有读写权限, 给speak.db给777权限!

又报错

 General error: 14 unable to open database file

 

因为 打开数据库文件时，还会自动生成一个临时文件。服务器不仅需要对数据库文件可写，而且要对包含该数据库文件的文件夹可写。

所以要给放置数据库的db目录给777权限!

然后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
namespace app\index\controller;
 
use app\action;
use think\Db;
 
class Index extends action
{
    public function index(){
        $this->redirect('http://blog.he29.com?come=api');
    }
    public static function db ($table) {
     return Db::connect('db_speak')
    ->table($table);
    }
    public function welcome(){
    //$list = self::db('list')->find();
    //p($list);
    for ($i = 0; $i < 110; $i++) {
    $result = self::db('list')->insertGetId([
    'text' => rand(0,9),
    'time'=> getStrtime()
    ]);
    p($result);
    }
    //$list = self::db('list')->paginate(10);
    //p($list);
    }
}

100 条数据顺利插入成功了, 分页数据也加载出来了!

以后就可以无忧无虑的使用sqlite数据库了!

 

jQuery插件pjax使用记录

2019-06-06admin阅读(1603)评论(0)

几年前就试用过pjax 这个插件, 当时折腾了一会儿没弄明白也就抛弃了, 这几天突然想起来, 查了一下文档突然就开朗了!刚才部署到了博客上,实际很简单, 目前就几行代码在生效!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(function() {
console.log('pjax init');
$(document).pjax('a[target!=_blank]', '.content-wrap', {
fragment:'.content-wrap', timeout:8000
});
$(document).on('submit', 'form', function(event) {
$.pjax.submit(event, '.content-wrap', {
fragment: '.content-wrap',
timeout: 6000
})
});
$(document).on('pjax:send', function() {
//pjax链接点击后显示加载动画；
$(".pjax_loading").css("display", "block");});
$(document).on('pjax:complete', function() {
//pjax链接加载完成后隐藏加载动画；
$(".pjax_loading").css("display", "none");
});
});

网上一堆的教程, 在说前端怎么怎么处理怎么处理, 服务端怎么怎么处理, 实际上不需要了!

我当时的思路是, 我拦截所有的a链接请求, 点击a链接时候获取url, 然后使用ajax 获取整个目标页面的html内容,

然后插入到整个页面里(前提条件是所有的css和js都是全局引入,每个页面都相同);

这样就实现了不刷新打开下一页的问题, 但是后来想想, 不管能不能实现, 应该还要处理,浏览器的前进后端等等…

刚好pjax 就帮我们处理好了这些!

pjax 结合 pushState 和 ajax 技术， 不需要重新加载整个页面就能从服务器加载 Html 到你当前页面，这个 ajax 请求会有永久链接、title 并支持浏览器的回退/前进按钮。

pjax 项目地址在 https://github.com/defunkt/jquery-pjax 。
具体效果可以查看本博客~
pjax 的中文文档地址 http://bsify.admui.com/jquery-pjax/
具体的事件和参数都可以直接查看此文档!

html滚动穿透问题详解

2019-05-17admin阅读(2295)评论(0)

3034

臭名昭著的前端滚动穿透问题,今天也遇到了,网上找来的大概有三种解决方案!

1. css之overflow:hidden

1
2
3
4
html, body {  
    overflow: auto;  
    height: 100%;  
}

当弹出蒙层时，禁用了html和body的滚动条，滚动列表的滚动位置会丢失, 需要使用js来还原,

document.scrollingElement.scrollTop 获取滚动条的距离, 然后还原!

但是我需要一打开弹窗就固定背景的位置, 所以直接pass!!!

2. touchmove + preventDefault

在弹出的提示框中阻止浏览器的默认行为以及冒泡行为，在可以滑动的dom元素中取消浏览器的默认行为以及冒泡行为

1
2
3
4
5
6
7
8
9
10
let stop = document.querySelector("#tm");  
stop.addEventListener("touchmove", (event) => {  
    event.preventDefault();  //阻止默认行为                
    event.stopPropagation(); //阻止冒泡  
}, false)  
let cancelStop = document.querySelector(".allReason");  
cancelStop.addEventListener("touchmove", (event) => {  
    event.returnValue = true;   //取消阻止默认行为                              
    event.cancelBubble = true;  //取消阻止冒泡                          
}, false)

使用这种方法会有一个缺点，那就是滑动其它地方，底部页面不会滚动，但是在可以滑动的页面中，将其滑动到底部或者顶部后继续滑动，底部页面任然可以滚动!

而且经过测试, ios11以上版本均无效!!! 还是可以滑动!!!

3. css 之 position: fixed + js 滚动条的位置

在弹出遮罩层的时候给body添加样式以及获取滚动条的位置，

在关闭遮罩层的时候移除body的样式以及设置滚动条的位置

1
2
3
4
.scroll {  
    position: fixed;  
    width: 100%;  
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var scroll = (function (className) {  
    var scrollTop;  
    return {  
        afterOpen: function () {  
            scrollTop = document.scrollingElement.scrollTop || document.body.scrollTop;  
            document.body.classList.add(className);  
            document.body.style.top = -scrollTop + 'px';  
        },  
        beforeClose: function () {  
            document.body.classList.remove(className);  
            document.scrollingElement.scrollTop = scrollTop;  
            document.body.scrollTop = scrollTop;  
        }  
    };  
})('scroll');

最终结果如下:

Snipaste_2019-05-17_14-04-20

最终完美解决!

 

微信图片_20190513112058

累累累!!!

js中最常用的 test exec match search replace split 6个方法学习

2019-04-23admin阅读(1644)评论(0)

 

1. test  检查指定的字符串是否存在

1
2
3
4
var data = "13879144915";
var reCat = /\d{11}/gi;
console.log(reCat.test(data));  //true
//检查字符是否存在  g 继续往下走  i 不区分大小写

2. exec 和 match 返回查询值

1
2
3
4
5
var data = '123123,213,12312,312,3,Cat,cat,dsfsdfs';
var reCat = /\d/i;
console.log(reCat.exec(data));  //Cat
var arrMactches = data.match(reCat)
console.log(arrMactches)

这两个方法返回内容相似,具体的区分请查看 这里

3. search  返回搜索位置  类似于indexof

1
2
3
var data = '天明哈哈哈哈微笑哈哈哈';
var reCat = /微笑/gi;
console.log(data.search(reCat));

4. replace  替换字符, 可利用正则替换

详细解释方法: http://blog.he29.com/v2/know/content?id=211#h1

5. split   利用正则分割数组

1
2
3
4
var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs";
var reCat = /,/;
var arrdata = data.split(reCat);
console.log(arrdata)

  • 上一页
  • 1
  • ···
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • ...
  • 下一页
  • 共 16 页
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
2025年7月
一 二 三 四 五 六 日
« 六    
 123456
78910111213
14151617181920
21222324252627
28293031  

最新评论

  • 前端小武 8年前 (2017-04-06)说：
    我看到了layer
  • 丁艳平 8年前 (2017-03-03)说：
  • Dawn 9年前 (2016-09-16)说：
    call_user_func_array最后的例子是错哦，你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 9年前 (2016-06-21)说：
    tp框架设置了全局捕获异常的，这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 9年前 (2016-05-17)说：
    构造函数里的判断 用异常机制可能更好一些

其他类型

  • 芊云全景
  • 配音兔AI配音神器

博客类型

  • 芊云全景
  • 配音兔AI配音神器

左邻右舍

  • 易水寒
  • 楼教主
  • 芊云全景
  • 贤心
  • 配音兔AI配音神器

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2025 雅荷心语博客   网站地图