2017-03-02

任务六：基础JavaScript练习（三）

Lesson

任务九：基础JavaScript练习

Reference

Demo

Example Page

Note

正则方法

test()：正则对象的test方法返回一个布尔值，表示当前模式是否能匹配参数字符串。
match()：返回一个数组，成员是所有匹配的子字符串。
search()：按照给定的正则表达式进行搜索，返回一个整数，表示匹配开始的位置。
replace()：按照给定的正则表达式进行替换，返回替换后的字符串。
split()：按照给定规则进行字符串分割，返回一个数组，包含分割后的各个成员。

正则特殊字

\cX 表示Ctrl-[X]，其中的X是A-Z之中任一个英文字母，用来匹配控制字符。
[\b] 匹配退格键(U+0008)，不要与\b混淆。
\n 匹配换行键。
\r 匹配回车键。
\t 匹配制表符tab（U+0009）。
\v 匹配垂直制表符（U+000B）。
\f 匹配换页符（U+000C）。
\0 匹配null字符（U+0000）。
\xhh 匹配一个以两位十六进制数（\x00-\xFF）表示的字符。
\uhhhh 匹配一个以四位十六进制数（\u0000-\uFFFF）表示的unicode字符。

Tips

函数的arg可以是函数吗？
可以的，但是调用这个argument时在参数区域写成argument不加括号，函数内部需要写成argument()的形式
冒泡和捕获
冒泡是从精确到模糊
捕获是从模糊到精确
阻止冒泡
false时冒泡：e.stopPropagation();阻止冒泡。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #display{
      list-style: none;
      margin: 5px 0;
      padding: 0;
    }
    #display li{
      list-style: none;
      display: inline-block;
      padding: 5px;
      margin:0 5px 5px 0;
      border:1px solid #aaa;
      background: #eee;
      font-size:10px;
      color: #aaa;
      vertical-align: bottom;
    }
  </style>
</head>
<body>
  <div id="insert-div">
    <h3>Insert/ Delete</h3>
    <!-- <input type="text" id="input-text"> -->
    <textarea name="input-text" id="input-text" cols="30" rows="10">华莱士,蛤三篇、233 大新闻
蛤蛤</textarea>
    <br>
    <button id="leftin" value="LeftIn">LeftIn</button>
    <button id="rightin" value="RightIn">RightIn</button>
    <button id="leftout" value="LeftOut">LeftOut</button>
    <button id="rightout" value="RightOut">RightOut</button>
  </div>
  <hr/>
  <div id="search-div">
    <h3>Search</h3>
    <input type="text" id="search-text" value="蛤">
    <button id="search-btn">Search</button>
  </div>
  <hr/>
  <ul id="display">
    
  </ul>
</body>
<script>
  var inputText = getid('input-text');
  var leftIn = getid('leftin');
  var leftOut = getid('leftout');
  var rightIn = getid('rightin');
  var rightOut = getid('rightout');
  var display = getid('display');
  var queue = new Array();

  // 选择器
  function getid(id){
    return document.getElementById(id);
  }

  // 创建执行函数
  function putLeftIn(input){
    queue.unshift(input);
  }

  function putRightIn(input){
    queue.push(input);
  }

  function putLeftOut(){
    var removed = queue.shift();
    alert(removed);
  }

  function putRightOut(){
    var removed = queue.pop();
    alert(removed);
  }

  // 检验合法性
  function splitInput(input){
    var newqueue = input.split(/\s{1,}|、|,|，/);
    return newqueue;
  }

  // 渲染
  function render(){
    display.innerHTML = ""
    for (var i=0;i<queue.length;i++){
      var newLi = document.createElement('li');
      var newText = document.createTextNode(queue[i]);
      newLi.append(newText);
      display.append(newLi)
    }
  }

  // 绑定事件
  leftin.addEventListener('click',function(){
    var input = inputText.value.trim();
    var childque = splitInput(input);
    if(childque){
      for(var i=childque.length-1;i>=0;i--){
        putLeftIn(childque[i]);
      }
      render();
    }
  })
  rightin.addEventListener('click',function(){
    var input = inputText.value.trim();
    var childque = splitInput(input);
    if(childque){
      for(var i=0;i<childque.length;i++){
        putRightIn(childque[i]);
      }
      render();
    }
  })
  leftout.addEventListener('click',function(){
    if (queue.length){
      putLeftOut();
      render();
    }
    
  })
  rightout.addEventListener('click',function(){
    if(queue.length){
      putRightOut();
      render();
    }
  })

  var searchText = getid('search-text').value;
  var searchBtn = getid('search-btn');

  // 搜索函数
  function search(input){
    var inputText = input.trim();
    for(var i=0;i<queue.length;i++){
      if(queue[i].match(inputText)){
        display.children[i].style.background = "#888";
        display.children[i].style.color = "#fff";
      }
    }
  }

  // 绑定搜索函数
  searchBtn.addEventListener('click',function(e){
    e.stopPropagation();
    search(searchText);


  })


</script>
</html>