题目描述： 有一个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>
# 正则表达式
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生