web页面渲染字符串时，自动将字符串中的 url 显示成链接

Question

例如：

输入

<h2>ni hao</h2>https://s.geekbang.org <h1>hello world</h1>

页面将会展示

<h2>ni hao</h2>https://www.a.com/bcd/e?a=1&c=2 <h1>hello world</h1>

就如同 SegmentFault 提问编辑器中具有功能一样。

请问是怎么做到的？

Answer 1

没找到别人封装好的代码，自己写了一个

function urlfilter(str) {

  function xssfilter (d) {
      var ESC = {
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        '&': '&amp;'
      }
      function escape (s) {
        return s.replace(/[<>"&]/g, escapeChar)
      }
      function escapeChar (a) {
        return ESC[a] || a
      }
      return escape(d)
  }

  str = xssfilter(str)
  return str.replace(/\b(https?:\/\/\S+)/gi, '<a href="$1" target="_blank">$1</a>')
}

element.innerHTML = urlfilter('<h2>ni hao</h2>https://s.geekbang.org <h1>hello world</h1>')

Answer 2

SegmentFault使用的是链接用a标签包裹，内容是url，href也是这个url，F12看一下就明白了

Answer 3

谢邀，这一块接触的不多，只说一下我自己的想法吧，这应该是一种编辑器的功能，当将编辑的内容最后展示的时候，会有正则匹配，匹配到符合超链接的字符，就用a标签包裹，标签的href以及中间的内容都是这部分字符，类似这样

<a href="http://www.baidu.com">http://www.baidu.com</a>