把一段文本中的网址转换成 a 标签链接

把一段文本中的网址转换成 a 标签链接，只需要使用正则将文本中的链接替换成 a 标签即可，只是在网页中需要注意防止 XSS攻击。

提供一段好用的正则

/(f|ht){1}(tp|tps):\/\/([\w-]+\S)+[\w-]+([\w-?%#&=]*)?(\/[\w- ./?%#&=]*)?/g

示例

输入

我这有个网址： http://0.0.0.0:8080/rain/me
还有两个网址： http://0.0.0.0:8080/rain/me http://0.0.0.0:8080/rain/me

输出

我这有个网址：<a href="http://0.0.0.0:8080/rain/me" target="_blank"> http://0.0.0.0:8080/rain/me </a> 
还有两个网址：<a href="http://0.0.0.0:8080/rain/me" target="_blank"> http://0.0.0.0:8080/rain/me </a> <a href="http://0.0.0.0:8080/rain/me" target="_blank"> http://0.0.0.0:8080/rain/me </a>

缺陷

两个网址连续时无法正确识别

输入

我这有两个网址： http://0.0.0.0:8080/rain/mehttp://0.0.0.0:8080/rain/me

输出

我这有两个网址： <a href="http://0.0.0.0:8080/rain/mehttp" target="_blank"> http://0.0.0.0:8080/rain/mehttp </a>://0.0.0.0:8080/rain/me

代码：

/**
 * 转换一段文字中的 url 为 a 标签
 * @param {String} str 要转换的字符串
 * @returns {String} linkStr 转换后的字符串
 */
 const urlToLink = (str) => {
  if (!str) {
    return str;
  }
  
  // 防止 XSS攻击
  str = xssFilter(str);
  
  const re = /(f|ht){1}(tp|tps):\/\/([\w-]+\S)+[\w-]+([\w-?%#&=]*)?(\/[\w- ./?%#&=]*)?/g;
  
  str = str.replace(re, function (url) {
    return `<a href=${url} target="_blank"> ${url} </a>`;
  });
  return str;
};

const xssFilter = (html) {
  const divStub = document.createElement('div');
  if (divStub.textContent !== undefined) {
    divStub.textContent = html;
  } else {
    // for ie9-
    divStub.innerText = html;
  }
  return divStub.innerHTML;
}