前端小计(有用的字符串方法)——第二十二天到第二十四天：JavaScript里面的居民们

要求：
1、基于HTML，实现需求
2、按照HTML中按钮的描述以此实现功能
3、计算结果显示在 id 为 result 的 P 标签中

这里放的是HTML

<div>
    <label>String A:
        <input id="radio-a" type="radio" checked="true" name="str-obj" value="a">
    </label>
    <textarea id="str-a"></textarea>
    <label>String B:
        <input id="radio-b" type="radio" name="str-obj" value="b">
    </label>
    <textarea id="str-b"></textarea>        
    <label>Num A：<input id="num-a" type="number" value="0"></label>
    <label>Num B：<input id="num-b" type="number" value="1"></label>
</div>
<div>
    <button>获取当前选中输入的内容长度</button>
    <button>当前选中输入中的第3个字符</button>
    <button>把两个输入框的文字连接在一起输出（concat）</button>
    <button>输入B中的内容，在输入A的内容中第一次出现的位置（indexOf）</button>
    <button>输入A中的内容，在输入B的内容中最后一次出现的位置（lastIndexOf）</button>
    <button>使用slice获取选中输入框内容的部分内容，参数为num-a及num-b</button>
    <button>当前选中输入框的行数</button>
    <button>使用substr获取选中输入框内容的子字符串，参数为num-a及num-b</button>
    <button>把所选输入框中的内容全部转为大写</button>
    <button>把所选输入框中的内容全部转为小写</button>
    <button>把所选输入框中内容的半角空格全部去除</button>
    <button>把所选输入框中内容的a全部替换成另外一个输入框中的内容</button>
</div>
<p id="result"></p>

这里放的是答案

<script>
    var ra = document.querySelector('#radio-a'),
        rb = document.querySelector('#radio-b'),
        str_a = document.querySelector('#str-a'),
        str_b = document.querySelector('#str-b'),
        num_a = document.querySelector('#num-a'),
        num_b = document.querySelector('#num-b'),
        btn = document.querySelectorAll('button'),
        p = document.querySelector('#result');

        //获取当前选中输入的内容长度
        btn[0].onclick = function() {
          if (ra.checked) {
            p.innerHTML = str_a.value.length;
          }else if (rb.checked) {
            p.innerHTML = str_b.value.length;
          }
        }

        //前选中输入中的第3个字符
        btn[1].onclick = function() {
          if (ra.checked) {
            //这三都可以
            //p.innerHTML = str_a.value.substr(2, 1);
            //p.innerHTML = str_a.value.substring(2, 3);
            p.innerHTML = str_a.value.slice(2, 3);
          }else if (rb.checked) {
            p.innerHTML = str_b.value.slice(2, 3);
          }
        }

        //把两个输入框的文字连接在一起输出（concat）
        btn[2].onclick = function() {
          p.innerHTML = str_a.value.concat(str_b.value);
        }

        //输入B中的内容，在输入A的内容中第一次出现的位置（indexOf）
        btn[3].onclick = function() {
          p.innerHTML = str_a.value.indexOf(str_b.value);
        }

        //输入A中的内容，在输入B的内容中最后一次出现的位置（lastIndexOf）
        btn[4].onclick = function() {
          p.innerHTML = str_b.value.lastIndexOf(str_a.value);
        }

        //使用slice获取选中输入框内容的部分内容，参数为num-a及num-b
        btn[5].onclick = function() {
          if (ra.checked) {
            p.innerHTML = str_a.value.slice(num_a.value, num_b.value);
          }else if (rb.checked) {
            p.innerHTML = str_b.value.slice(num_a.value, num_b.value);
          }
        } 

        //当前选中输入框的行数
        btn[6].onclick = function() {
          if (ra.checked) {
            p.innerHTML = str_a.value.split(/\r?\n|\r/).length;
          }else if (rb.checked) {
            p.innerHTML = str_b.value.split(/\r?\n|\r/).length;
          }
        }

        //使用substr获取选中输入框内容的子字符串，参数为num-a及num-b
        btn[7].onclick = function() {
          if (ra.checked) {
            p.innerHTML = str_a.value.substr(num_a.value, num_b.value);
          }else if (rb.checked) {
            p.innerHTML = str_b.value.substr(num_a.value, num_b.value);
          }
        }  

        //把所选输入框中的内容全部转为大写
        btn[8].onclick = function() {
           if (ra.checked) {
            p.innerHTML = str_a.value.toUpperCase();
          }else if (rb.checked) {
            p.innerHTML = str_b.value.toUpperCase();
          }
        }

        //把所选输入框中的内容全部转为小写
        btn[9].onclick = function() {
           if (ra.checked) {
            p.innerHTML = str_a.value.toLowerCase();
          }else if (rb.checked) {
            p.innerHTML = str_b.value.toLowerCase();
          }
        }

        //把所选输入框中内容的半角空格全部去除
        btn[10].onclick = function() {
          if (ra.checked) {
            // str_a.value = str_a.value.replace(/\s/g, '');
            str_a.value = str_a.value.replace(/\s/g, '');
          }else if (rb.checked) {
            str_b.value = str_b.value.replace(/\s/g, '');
          }
        }

        //把所选输入框中内容的a全部替换成另外一个输入框中的内容
        btn[11].onclick = function() {
          if (ra.checked) {
            str_a.value = str_a.value.replace(/a{1}/, str_b.value);
          }else if (rb.checked) {
            str_b.value = str_b.value.replace(/a/, str_a.value);
          }
        }
  </script>

还算是顺利。
但是也有问题的出现：
第7个按钮的要求是：当前选中输入框的行数。
实在无法理解textarea的自动换行（不用回车）到底换了没有。。。emm，
用\n的正则匹配一直是‘一’，我认为是没有换。
用回车后就能匹配了。
很痛苦。