zoukankan      html  css  js  c++  java
  • 基础JavaScript练习(三)总结

    任务目的

    • 实践JavaScript数组、字符串相关操作

    任务描述

    • 基于任务四进行升级
    • 将新元素输入框从input改为textarea
    • 允许一次批量输入多个内容,格式可以为数字、中文、英文等,可以通过用回车,逗号(全角半角均可),顿号,空格(全角半角、Tab等均可)等符号作为不同内容的间隔
    • 增加一个查询文本输入框,和一个查询按钮,当点击查询时,将查询词在各个元素内容中做模糊匹配,将匹配到的内容进行特殊标识,如文字颜色等。举例,内容中有abcd,查询词为ab或bc,则该内容需要标识

    任务注意事项

    • 实现简单功能的同时,请仔细学习JavaScript基本语法、事件、DOM相关的知识
    • 请注意代码风格的整齐、优雅
    • 代码中含有必要的注释
    • 建议不使用任何第三方库、框架

    在线学习参考资料

    基础JavaScript练习(三)总结

    1、 正则表达式

    正则表达式是一个对象,一个字母序列,组成一个搜索模式表示想搜索或替换的内容,这个搜索模式可用于搜索或替换,它可以为一个字母或更复杂的模式,可以表达文本搜索或文本替换的类型。

    语法:

    /pattern/modifiers;

    使用字符串方法

    在JavaScript中,正则表达式通常使用两个字符串的方法:search()和replace()。

    search()方法用于匹配搜索,返回匹配字符串的位置。

    replace()方法,返回被替换后的字符串。

    正则表达式修饰符

    修饰符用于执行不区分大小写的全局搜索。

    i:不区分大小写

    g:全局搜索(寻找所有匹配字符串,而不是找到第一个匹配后停止)

    m:多行匹配

    正则表达式模式

    括号用于寻找一个字符序列。

    [abc]:寻找括号中的任何一个字符。

    [0-9]:寻找括号中的任何一个数字。

    (x|y):寻找由“|”分开的任何一部分。

    元字符是有特殊意义的字符

    d:寻找数字。

    s:寻找空格。

    :匹配内容在单词开头或单词末尾。

    uxxxx:寻找由十六进制数字xxxx表示的Unicode字符。

    除此意外还有:.、w、W、D、S、B、、 、f、 、 、v、xxx、xdd

    量词定义数量

    n+:匹配至少有一个n的字符串。

    n*:匹配n出现零次或多次的字符串。

    n?:匹配n出现零次或多次的字符串。

    除此意外还有:n{x}、n{x,y}、n{x,}、n$、^n、?=n、?!n

    test()方法

    test()方法是一个正则表达式方法,它在字符串中寻找一种模式,根据结果返回true或者false。

    eg:var patt = /e/;
    patt.test("The best things in life are free!");

    2、 String search() Method

    search()方法寻找一个字符串或一个特定的值,返回匹配字符串的起点位置。搜索的值可以为一个字符串也可以为一个正则表达式。如果没有匹配成功,返回-1。

    语法:

    string.search(searchvalue)

    3、 JavaScript eval() Function

    eval()函数执行或评估一个argument。当argument是一个表达式,eval()评估这个表达式,如果argument是一个或多个javascript语句,eval()执行这些语句。

    语法:

    eval(string)

    string:一个JavaScript表达式,变量,语句或者语句序列。

    4、 正则表达式中使用变量

    (1)将变量表示为正则表达式形式的字符串

    eg:var a = document.getElementById(“input_value”).value;

         var b = “/” + a + “/g”

    (2)将字符串转为正则表达式。

    var reg = eval(b);  //reg即为正则表达式

    5、已提交作业

    代码地址:https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task2-6

    Demo地址:http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task2-6/index.html

  • 相关阅读:
    typescript提示implicitly has an 'any' type 问题
    element-ui中的table可分页多选功能-记住上一页勾选数据
    CSS加载会阻塞页面显示?
    网络流(EK算法)
    网络流(dinic算法)
    洛谷p1120小木棍(剪枝优化)
    三种背包模板
    HDU2089-不要62(数位dp)
    windy数(数位dp)
    素数判定(待填坑)
  • 原文地址:https://www.cnblogs.com/melbourne1102/p/6524198.html
Copyright © 2011-2022 走看看