【笔试集锦】百度2018前端笔试笔试第一题

最新推荐文章于 2024-06-17 02:46:14 发布

My-Lady

最新推荐文章于 2024-06-17 02:46:14 发布

阅读量1.9k

点赞数

分类专栏：前端笔试题集锦文章标签：百度前端笔试 http字符串匹配正则表达式

本文链接：https://blog.csdn.net/heshan1992/article/details/77942355

版权

前端笔试题集锦专栏收录该内容

11 篇文章 0 订阅

订阅专栏

题目描述：有一个div容器，容器中的内容如下

<div id="jsContainer">
    这里会，给出一段随机文本，可能包含一些链接，比如https://www.baidu.com，或者 www.baidu.com?from=onlineExam，如果出现链接文本，请给该链接文本加上链接标签，用户点击后能直接在新窗口中打开该链接。
</div>

实现link函数，要求：
（1）jsContainer中不能包含有其他的dom 元素
（2）将文本中的以http、https或是是www开头的链接加上链接标签，同时www开头的链接地址要加上http协议。
（3）点击链接时，在新窗口中打开。

思路：
（1）jsContainer中不包含其他的dom元素则可以考虑利用innerText或者是textContent来获取元素中的文本信息，剔除所有的标签元素
（2）匹配http等协议利用正则表达式进行匹配
（3）利用replace函数给链接加上a标签
（4）在新窗口打开表示target = “_blank”

需要知识点：

1、innerText和textContent的区别
（1）innerText不会获取到隐藏元素的文本内容
（2）innerText不会获取script、style等元素内容
（3）innerText会导致回流（reflow）
textContent会获取所有内容文本，不管元素是否隐藏或者是script等，同时不会导致回流。
innerHTML兼容性最好但是由于题目要求不能包含其他的标签元素，所以不能使用innerHTML。具体的差别可以通过如下的代码体现：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>innerText vs textContent</title>
</head>

<body>

<div id="test">
  test area
  <div style="visibility:hidden">hidden</div>
  <div style="display:none">none</div>
  <div>hello</div>
  <script>document</script>
</div>
<hr />
<div id="log_container">
  log area
</div>

  <script>
    function log(text){
      var $d = document.createElement('pre');
      $d.textContent = text;
      log_container.appendChild($d);
    }

    log('html: ' + JSON.stringify(test.innerHTML));

    log('innerText: ' + JSON.stringify(test.innerText));

    log('textContent: ' + JSON.stringify(test.textContent));

  </script>
</body>
</html>

运行结果：

html: "\n  test area\n  <div style=\"visibility:hidden\">hidden</div>\n  <div style=\"display:none\">none</div>\n  <div>hello</div>\n  <script>document</script>\n"

innerText: "test area\nhello"

textContent: "\n  test area\n  hidden\n  none\n  hello\n  document\n"

2、利用replace函数替换，其中要注意一种情况就是www开头的，所以不能直接用字符串替换（利用字符串替换时$1表示的是第一个匹配的字符串）

text = text.replace(reg,"<a target = '_blank' href='$1'>$1</a>");

应该要利用replace传入函数的方式处理www开头的情况，函数的返回值将替换匹配的字符串，同时要注意的是当正则表达式中没有g全局标志时，replace只会匹配一个，有全局标志才会进行全局的替换。函数中的参数第一个是匹配字符串，后面的多个参数可表示匹配的子串，然后是一个整数，表示匹配字符串在原字符串中的位置，最后一个参数是原字符串。
题目答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a {
            color: #00bc9b;
        }
    </style>
</head>
<body>
<div id="jsContainer">
    <span>hello</span>
    这里会给出一段随机文本，<span>hi,nihao</span>可能包含一些链接，比如https://www.baidu.com，或者 www.baidu.com?from=onlineExam，如果出现链接文本，请给该链接文本加上链接标签，用户点击后能直接在新窗口中打开该链接。
</div>
<script type="text/javascript">
    function link() {
       var Dom = document.getElementById("jsContainer");
       var text = Dom.textContent;/*保证其中没有其他子标签，只获取文本信息*/
   /*     var text = Dom.innerText;*/
     /*    console.log(text);*/
       var reg = new RegExp("(http://||https://)?www.[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]","g");
       var text = text.replace(reg,function(result){
          if((new RegExp("^www.")).test(result)){
              result = "http://" + result;
          }
          return '<a target="_blank" href='+ result +'>'+result+'</a>'
      })
       Dom.innerHTML = text;
    }

    link();
</script>
</body>
</html>

My-Lady

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【笔试集锦】百度2018前端笔试笔试第一题

题目描述：有一个div容器，容器中的内容如下<div id="jsContainer"> 这里会，给出一段随机文本，可能包含一些链接，比如https://www.baidu.com，或者 www.baidu.com?from=onlineExam，如果出现链接文本，请给该链接文本加上链接标签，用户点击后能直接在新窗口中打开该链接。</div>实现link函数，要求：（1）jsCont
复制链接

扫一扫

专栏目录