js正则表达式简单应用

关于正则表达式,我也是最近才开始学,以前虽然也用到一些正则,不过大多是关于验证,比如验证手机号,邮箱,身份证等等。这些正则网上随便一搜都能搜索到,这几天稍微看了下js正则的用法,在此做一个简单的分享。

我知道不写案例你们是不会进来的,好吧,就来个案例 _ :

这是一个空页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
    </body>
</html>

拷贝一段文字,弄个简单的布局:

<div id='wrap' class='wrap'>
    <h4>
        大锅菜
    </h4>
    <p>大锅菜是一道色香味俱全的汉族名菜,中国北方地区常见菜品之一,在北方地区较流行。食材多样,营养丰富,汤汁浓郁。
        此菜其名称的由来,首先是它有很多种菜的风味,其次就是说在早年大家是在一起吃饭一起干活,所以就叫做了大锅菜。
        主要配料为猪肉,白菜,豆腐,粉条等。</p>
    <p>大锅菜的做法很简单,把几种家常菜蔬放进大锅一起或煮或炖,到了一定火候便成了“大锅菜”。
        熬炖中各种菜相互沾光借味,杂而不乱,多却不琐碎。当然也不是什么都可以放,自然也不是什么人都喜欢吃。
        大锅菜的原料不外乎白菜、豆腐、粉条之类,当然也少不了大片的肉或大块排骨,有时候还要放上红红的辣子或者火锅的底料。
        熬炖出来的鲜香浓郁的大锅菜:白菜熬得立不起身,豆腐炖得挺不起腰,粉条烀得站不住脚,而肉和排骨更是咕嘟得松松垮垮。</p>
    <span class='tab'>1</span>
</div>

效果:

Paste_Image.png

接下来是添加样式:

* {padding: 0;margin: 0;}
.fl {float: left}
.wrap {
    width:500px;
    height:400px;
    position: absolute;
    top:50px;
    left:50%;
    margin-left: -250px;
    border: 1px #ccc solid;
    padding: 30px;
    font-family: "微软雅黑";
    background: #dcf3dc;
}

稍微好一点了。

Paste_Image.png

再美化一下:

.wrap h4 {
    text-indent: 0;
    margin-bottom: 1em;
    color:#736357;
    border-bottom:1px solid #736357;
    letter-spacing: 2px;
}

.wrap p {
    text-indent: 2em;
    text-align: justify;
    line-height: 26px;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.tab {
    position: absolute;
    right:20px;
    bottom: 16px;
    display: inline-block;
    color: #666;
}

先就这样吧... ...

Paste_Image.png

现在,假如我有这样一个需求,需要将文章里所有的“大锅菜”关键词变得醒目起来,如何做呢?

这个思路是很明确的,大概可以分为以下几步:

1. 通过dom元素获取文本内容

2. 给文本内容的“大锅菜”关键词加上样式,有个突出效果。替换文本。

3. 将文本内容重新赋值给dom元素

实现代码:

var wrapDom = document.getElementById('wrap');
var text = wrapDom.innerHTML;
text = text.replace('大锅菜','<span style=\'font-size: larger;color: deeppink;font-weight: 600;\'>大锅菜</span>');
wrapDom.innerHTML = text;

Paste_Image.png

这样就有一个问题,它只替换了第一个关键词。原来js里面字符串的replace方法不会替换所有的,只会替换第一个匹配的字符。我们希望它进行全局匹配,这个时候,就要用到正则对象了。

var reg = new RegExp('大锅菜','g');

g代表全局匹配。

接着,我们还是调用字符串的replace方法,不过这样一来,就可以进行全局匹配了。

var reg = new RegExp('大锅菜','g');
text = text.replace(reg,'<span style=\'font-size: larger;color: deeppink;font-weight: 600;\'>大锅菜</span>');

Paste_Image.png

实现了,我们可以通过这种方式来实现全局替换,你看到这里,可能回想,要是有一个replaceAll方法就好了。

很遗憾,原生js没有提供这一个方法。

不过,我们可以通过正则来模拟出这个方法。

String.prototype.replaceAll = function(oldStr , newStr){
    var reg = new RegExp(oldStr,'g');
    return this.replace(reg,newStr);
}
        
var wrapDom = document.getElementById('wrap');
var text = wrapDom.innerHTML;
text = text.replaceAll('大锅菜','<span style=\'font-size: larger;color: deeppink;font-weight: 600;\'>大锅菜</span>');
wrapDom.innerHTML = text;

像这样,通过prototype来扩展原生js的字符串,就可以达到这个目的了。

免责声明: 博客中所有的图片素材均来自百度搜索,仅供学习交流,如有问题请联系我,侵立删,谢谢。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯NEXT学位

这些 CSS 命名规范将省下你大把调试时间(文末有福利)

40310
来自专栏数据小魔方

超强脑洞第三弹之——ggplot构造瀑布图

对,就是瀑布图,你没看错。而且是使用ggplot现有图层叠加构造,并没有用任何ggplot的外挂插件。 作图理念是在数据源的构造上,方法与《Excel图表之道》...

2883
来自专栏前端新视界

CSS 特殊属性介绍之 pointer-events

首先看一下 MDN 上关于 pointer-events 的介绍: CSS属性 pointer-events 允许作者控制特定的图形元素在何时成为鼠标事件的 t...

19310
来自专栏我的博客

JQuery中DOM操作示例代码

Jquery的DOM操作 1、插入节点代码示例: <p title=”选择你喜欢的水果”>你最喜欢的水果是?</p> <ul> <li title=”苹果”>苹...

2714
来自专栏数据结构与算法

P1103 书本整理

题目描述 Frank是一个非常喜爱整洁的人。他有一大堆书和一个书架,想要把书放在书架上。书架可以放下所有的书,所以Frank首先将书按高度顺序排列在书架上。但是...

3458
来自专栏web编程技术分享

js学习: 自定义类库 - miniQuery 2.0

3517
来自专栏程序员的诗和远方

20180818_ARTS_week08

这道题是要把字符串中的数字变成 int,通常的做法是遍历字符串,然后判断是不是在 0~9 中,如果把 0~9 放数组里每次循环检查感觉不是太好,时间复杂度是个 ...

651
来自专栏菜鸟前端工程师

html+css学习笔记008-浮动0清除浮动

1132
来自专栏HTML5学堂

段落首字下沉

HTML5学堂:在项目中,时常能看到了一种文字展示的特殊效果——首字下沉(如图)。于是花了几分钟考虑了一下使用方法,脑测之后,又敲了敲代码实现了一下,写出来与大...

3975
来自专栏JackieZheng

初探JavaScript(二)——JS如何动态操控HTML

  除去五一三天,我已经和《JavaScript Dom编程艺术》磨合了六天,第一印象很好。慢慢的,我发现这是一块排骨,除了肉还有骨头。遇到不解的地方就会多看几...

2595

扫码关注云+社区

领取腾讯云代金券