小居

JavaScript 之 String.replace

流年 — Fri, 18 May 2012 14:05:11 +0000

最简单的用法

直接的用字符串替换字符串是最简单的用法，这种情况下将只会替换掉第一个匹配的字符串。

1	var res = 'a1a2a3'.replace('a', 'b'); // => 'b1a2a3'

使用正则来达到复杂的要求

JavaScript 中正则的介绍可参照 MDN 的 RegExp。

1
2
3
4

// 把字符串的所有英文字符都去掉，不论大小写
var pattern = /[a-z]/gi;
var str = '1aBc2d3E4f5e';
var res = str.replace(pattern, ''); // => '12345'

使用函数来对匹配内容做高级处理

在使用正则匹配的同时，可以使用一个函数来对匹配的内容来做更加复杂的一些处理，比如下面的把 < 和 > 做转义，而不用通过执行两次的 replace 操作。

1
2
3
4
5
6
7
8
9
10

// 转移 html 标签
var str = '',
specialMap = {
'<': '<',
'>': '>'
};

var newStr = str.replace(/[<>]/gm, function(match){
return specialMap[match];
}); // => ''

匹配函数的参数

在上面的例子中，匹配函数带了一个参数，其代表了当前匹配的内容。这个函数还可以带更多的参数。

匹配函数一共可以带 m+3 个参数，其中 m 是正则表达式中组（group）的个数（没 group 时 m 为 0）。

第一个参数是当前匹配内容；倒数第二个参数是当前匹配内容在待匹配字符串中的 index；最后一个参数是带匹配字符串；中间的 m 个参数则依次是各个分组内容。

1
2
3
4
5
6
7
8
9
10
11
12

// 演示匹配函数的参数
var str = '555-666-777-888';
var pattern = /(\d+)-(\d+)/g;

str.replace(pattern, function(match, g1, g2, index, str) {
console.log(match, g1, g2, index, str);
});

// => 555-666 555 666 0 555-666-777-888
// => 777-888 777 888 8 555-666-777-888

// 注意：匹配函数中没有 return，那么最终将不会替换

构建一个简单的模板函数

在现在，越来越多的功能依赖于 js，比如通过 ajax 等来获取 json 数据，然后拼成相应的 HTML 代码，然后插入到页面。在 HTML 结构复杂的情况下，拼 HTML 字符串是一件极其痛苦的事情，需要十分留意代码嵌套的问题；另外，后期的维护修改起来也是非常的痛苦的，特别是经过压缩的代码。

应对这个问题的一个解决方法就是：模板。正如JSP/PHP/Python 等模板系统一样，通过把 HTML 结构写写来，然后用数据来填写对应的变量，这样便方便了撰写/修改/维护。

现有的 JS 模板系统不少了，但在非大规模应用的情况下，可以简单地写一个函数来实现基本的功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/*
* @overview 根据字符串模板从json数据中生成字符串，模板标志为 {variable}
* @param {String} str 字符串形式的模板
* @param {JSON} data 待生成字符串的 json 数据
*/
function sub(str, data) {
return str.replace(/{(.*?)}/igm,function($,$1) {
return data[$1] ? data[$1] : '';
});
}

var tpl = '{name} (blog: {blog})';
var json = {
name: 'John',
blog: 'http://xx.oo'
};

随机文章

把JavaScript中的伪数组转换为真数组

流年 — Wed, 16 May 2012 12:00:45 +0000

在 JavaScript 中，函数中的隐藏变量 arguments 和用 getElementsByTagName 获得的元素集合（NodeList）都不是真正的数组，不能使用 push 等方法，在有这种需要的时候只能先转换为真正的数组。

对于 arguments，可以使用 Array.prototype.slice.call(arguments); 来达到转换的目的，但对于 NodeList 则不行了，其在 IE8 及以下将会报错，只能说其 JS 引擎有所限制。

因此，如果需要把 NodeList 转换为真正的数组，则需要做下兼容处理。

1
2
3
4
5
6
7
8
9
10
11

function realArray(c) {
try {
return Array.prototype.slice.call(c);
} catch (e) {
var ret = [], i = 0, len = c.length;
for (; i < len; i++) {
ret[i] = (c[i]);
}
return ret;
}
}

References

随机文章

短链公关

流年 — Sun, 06 May 2012 12:00:51 +0000

李开复一条微博的链接无法访问会自动跳回到腾讯微博个人首页。

此时方觉，短链除了节约带宽达到 140 字的目的外，还可以用作公关啊！对于负面影响的外链，不需粗暴删贴，只需腾讯等不解析该短链即可。

随机文章

以用户之名

流年 — Sat, 05 May 2012 12:00:19 +0000

“用户觉得”、“用户不觉得”、“用户会”、“用户不会”…… 这样的话语听多了就挺无奈也挺郁闷的：用户来用户去的，谁才是用户？说话者是吗？如果是，不如直接说“我”；如果不是，为何大胆地说“用户觉得”？

随机文章

Ubuntu下2个拾色器

流年 — Fri, 04 May 2012 12:00:07 +0000

Ubuntu 下的使用中的 2 个拾色器工具，Gcolor2 和 Gpick。

Gcolor2

1	sudo apt-get install gcolor2

Gcolor2 界面简单美观，只可惜取色的时候没有实时显示选取的地方和颜色，需要点击才能取色，对于细微地方的取色来说可能有点难度。

Gpick

1	sudo apt-get install gpick

Gpick 界面则稍显复杂一点，但功能强大很多，除了可以实时取色和显示取色点外，还可以自定义颜色方案、分析图片来获取颜色和颜色方案预览（比如web界面）等。

随机文章

为gimp添加【保存为web格式】功能

流年 — Thu, 03 May 2012 12:00:39 +0000

gimp 默认没有 Photoshop 中的 保存为web格式 的选项，这样发布出去的图片就太大了，可以通过安装插件的形式来达到这个目的。

ubuntu 下直接 apt-get 即可：

1	sudo apt-get install gimp-plugin-registry

这样在 gimp 的 File 菜单中即可看到 save for web 选项，打开后和 Photoshop 的界面大同小异。

windows 下也可以安装，只是需要手动下载解压到 plugins 目录，具体可参照 How to Enable Photoshop Save For Web Feature in GIMP 。

随机文章

Ubuntu之tree命令

流年 — Mon, 30 Apr 2012 12:00:50 +0000

一般而言，ls 只是一个简单的 list 工具（虽然可以用各种参数组合来达到一些复杂的功能），但如果想要查看一个目录的目录结构就力不从心了，需要一种打印目录树的 tree 工具。

一段简短而强大的代码

很早以前，在网上看到一段简短而强大的代码，最终可以达到下面这种效果：

dem@ubuntu:~$ tree .local

/home/dem/.local
   |-share
   |---applications
   |---desktop-directories
   
dem@ubuntu:~$ cd apps/firefox
dem@ubuntu:~$ tree

/home/dem/apps/firefox
   |-chrome
   |---icons
   |-----default
   |-components
   |-defaults
   |---autoconfig
   |---pref
   |---profile
   |-----chrome
   |-extensions
   |---{972ce4c6-7e08-474-a285-320298ce6fd}
   |---inspector~mozilla.org
   |-----chrome
   |-----components
   |-----defaults
   |-------preferences
   |---talkback~mozilla.org
   |-----components
   |-------talkback
   |-greprefs
   |-icons
   |-plugins
   |-res
   |---dtd
   |---entityTables
   |---fonts
   |---html
   |-searchplugins
   |-updates
   |---0

代码如下（下载链接）：

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

#!/bin/sh
#######################################################
# UNIX TREE #
# Version: 2.3 #
# File: ~/apps/tree/tree.sh #
# #
# Displays Structure of Directory Hierarchy #
# ------------------------------------------------- #
# This tiny script uses "ls", "grep", and "sed" #
# in a single command to show the nesting of #
# sub-directories. The setup command for PATH #
# works with the Bash shell (the Mac OS X default). #
# #
# Setup: #
# $ cd ~/apps/tree #
# $ chmod u+x tree.sh #
# $ ln -s ~/apps/tree/tree.sh ~/bin/tree #
# $ echo "PATH=~/bin:\${PATH}" >> ~/.profile #
# #
# Usage: #
# $ tree [directory] #
# #
# Examples: #
# $ tree #
# $ tree /etc/opt #
# $ tree .. #
# #
# Public Domain Software -- Free to Use as You Like #
# http://www.centerkey.com/tree - By Dem Pilafian #
#######################################################

echo
if [ "$1" != "" ] #if parameter exists, use as base folder
then cd "$1"
fi
pwd
ls -R | grep ":$" | \
sed -e 's/:$//' -e 's/[^-][^\/]*\//--/g' -e 's/^/ /' -e 's/-/|/'
# 1st sed: remove colons
# 2nd sed: replace higher level folder names with dashes
# 3rd sed: indent graph three spaces
# 4th sed: replace first dash with a vertical bar
if [ `ls -F -1 | grep "/" | wc -l` = 0 ] # check if no folders
then echo " -> no sub-directories"
fi
echo
exit

仓库里的 tree 工具

因为前段时间使用 fedora，在没有上面那段脚本的情况下，敲入 tree 命令时却有输出，于是在 Ubuntu 下 apt-get install tree 了一下，果然有这个软件，而且功能很强大。

想想也是，上面那段代码有说 “Unix Tree / Linux Tree”，那自然是模拟实现已有程序的功能。

参数较多，man 一下或看在线版，比如可以用 L 参数来设定遍历层数，用 C 参数来使用颜色标识，使用 d 参数来只看目录。

随机文章

更改 Ubuntu 触摸板滚动为自然滚动

流年 — Sun, 29 Apr 2012 14:19:03 +0000

前段时间通过修改 grub 参数的形式来让 Ubuntu 识别了触摸板，基本的移动和点击功能可以使用了，但边缘滚动和双指滚动功能还无法正常使用。

但在 Ubuntu 正式发布了 12.04 后，从 beta 版 upgrade 了一下，发现滚动功能居然可以使用了，系统设置了也有了 Touchpad 这个选项卡。

这样，边缘滚动和双指滚动便可以使用了。但默认情况下的滚动是和鼠标的滚动一样的，手指运动方向和滚动条的运动方向一致而和内容的滚动方向相反，对于习惯了手机等触摸屏的滚动方式来说，触摸板的滚动方式有一点违和感，决定调为和触屏手机一致的滚动方式，或者说是 mac 宣称的 natural scroll。

方法一

一开始找到的是个极其简单的方法，只需要添加或修改一个文件即可，具体如下：

在当前用户 home 目录下添加或修改 .Xmodmap 文件

里面内容为：pointer = 1 2 3 5 4 7 6 8 9 10 11 12

注销当前用户再登录即可

虽然具体的数值含义不是很明白，但从 5/4、7/6 的交换情况来看，还是大抵明白是什么原理了：交换了滚动方向的信号。

我尝试后的确可以了，但使用了一会后，当我接上我的无线鼠标后，发现一种更加强烈的违和感了：常规鼠标的滚动方向也被相反了。这应该是那个配置文件做了全局映射的原因，无奈，放弃这种方法。

方法二

在第一个方案的评论中，找到了另一种解决方法，通过安装一个小软件来达到目的，具体如下：

1
2
3

sudo add-apt-repository ppa:zedtux/naturalscrolling
sudo apt-get update
sudo apt-get install naturalscrolling

安装完毕后启动这个应用程序即可设置是否启动 natural scrolling 以及是否开机启动。

我专门测试了下触摸板和鼠标的工作情况，触摸板可以使用 natural scrolling，而鼠标也可以维持原有的滚动方式，不错。

方法三

方法二可以后，我想了想，既然方法一可以通过简单的配置文件来达到目的，那么按理说，应该不需要常驻一个程序来监控，方便随时调整的 GUI 界面也不是必须的。只是问题是，如何把全局的映射改为只映射触摸版呢？

想了又想，想起当初查找资料来让系统识别触摸板的时候似乎 xinput 有一些设置功能的，尝试地敲了一下帮助命令 xinput -h，发现里面有 get-button-map 和 set-button-map 参数，这下高兴了，找着门道了。

于是先获取到触摸板对应的设备id，然后查看一下其原有的 button-map，然后设置新的 button-map，具体的过程如下图：

需要注意的是，这种方法会在重启后失效，所以需要把最后那个 set-button-map 命令加到 startup 中，让其开机启动。

update in 2012-05-03

发现触摸板的 id 会发生变化，从而导致有时 set-button-map 失效，这样的话，直接用 devices name 会更加合适，即：

1	xinput set-button-map "FSPPS/2 Sentelic FingerSensingPad" 1 2 3 5 4 7 6 8 9 10 11 12

mouse button maps

查了一下，Remapping mouse buttons 一文记录的 mouse button maps 如下：

1	Left click
2	Middle click
3	Right click
4	Wheel up
5	Wheel down
6	Wheel left
7	Wheel right
8	Thumb1
9	Thumb2
10	ExtBt7
11	ExtBt8

从那文来看，甚至可以做到不同程序使用不同的键映射。

随机文章

一大步还是只是一小步

流年 — Wed, 25 Apr 2012 12:00:37 +0000

在广州的道路上，基本上有垃圾桶的地方都有 2 个：可回收垃圾桶和不可回收垃圾桶。

这一步的迈出可以认为是环保观念的改善。

然而，我所存疑的是，究竟这个分类起到作用吗？

先不说那些可回收和不可回收共存只是中间挡板隔离的垃圾桶是如何达到分取垃圾的情况，姑且先看独立一桶的情况。

按理说，这样足以达到垃圾简单分类处理的目的，因为可以分别回收了。但就我平常的不经意观察来看，环保工人往往只是推了车过来，然后把可回收的、不可回收的都倒进车里。最终，和没有分类放置没有任何的区别。

在此之外，还有别的问题，在扔垃圾的时候有多少是有确定过手头的垃圾该扔那个垃圾桶？家庭垃圾又有多少是有分类带出去的呢？就我自己而言，前一点还好，后一点完全没做到。

垃圾分类，垃圾桶分类了，这一步，到底是一大步还是只是一小步呢？

随机文章

ubuntu添加网络打印机

流年 — Tue, 24 Apr 2012 10:00:19 +0000

以前从没连过打印机，现在需要使用部门的打印机，但 System Settings -> Prints 有问题，无法添加网络打印机。

Google 了一下，直接终端运行命令 system-config-printer 来进行配置，一路顺风顺水，测试通过。

小居

JavaScript 之 String.replace

相关文章

随机文章

把JavaScript中的伪数组转换为真数组

相关文章

随机文章

短链公关

相关文章

随机文章

以用户之名

相关文章

随机文章

Ubuntu下2个拾色器

相关文章

随机文章

为gimp添加【保存为web格式】功能

相关文章

随机文章

Ubuntu之tree命令

相关文章

随机文章

更改 Ubuntu 触摸板滚动为自然滚动

相关文章

随机文章

一大步还是只是一小步

相关文章

随机文章

ubuntu添加网络打印机

相关文章

随机文章