(Javascript) 将纯文本链接转换为可点击链接

Question

长话短说，我有一个在 Wix.com 编辑器下制作的网站，几个月前编码成为可能。我已经设置了一个自定义评论框，因此用户可以发布他们的评论，并阅读其他人的评论。

现在的情况是，“评论输入”采用纯文本，每当发布链接时，它都会显示为纯文本，没有颜色，没有可点击性。

我想要一个“读取”评论列表的代码，并转换以“https”或“http”或“www”开头的每个文本......橙色且可点击（在新标签中打开）

请问有什么解决办法吗？

谢谢 ！

我尝试了很多事情，例如：

$w('#text95').html = 
       (/((http:|https:)[^\s]+[\w])/g, '<a href="$1" target="_blank">$1</a>').replace;

text95 = 显示的评论（它是一个重复的文本，有多少评论）

Answer 1

看起来你的替换语法是错误的。

尝试这样的事情，我很确定这会奏效。

function linkify(inputText) {
    var replacedText, replacePattern1, replacePattern2, replacePattern3;

    //URLs starting with http://, https://, or ftp://
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

    //Change email addresses to mailto:: links.
    replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
    replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');

    return replacedText;
}

调用它：

$w('#text95').innerHTML = linkify($w('#text95').html);

Answer 2

这是我的答案（改进版本，包括视频链接）。

另请参阅此处的 Codepen。

const convertLinks = ( input ) => {

  let text = input;
  const linksFound = text.match( /(?:www|https?)[^\s]+/g );
  const aLink = [];

  if ( linksFound != null ) {

    for ( let i=0; i<linksFound.length; i++ ) {
      let replace = linksFound[i];
      if ( !( linksFound[i].match( /(http(s?)):\/\// ) ) ) { replace = 'http://' + linksFound[i] }
      let linkText = replace.split( '/' )[2];
      if ( linkText.substring( 0, 3 ) == 'www' ) { linkText = linkText.replace( 'www.', '' ) }
      if ( linkText.match( /youtu/ ) ) {

        let youtubeID = replace.split( '/' ).slice(-1)[0];
        aLink.push( '<div class="video-wrapper"><iframe src="https://www.youtube.com/embed/' + youtubeID + '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>' )
      }
      else if ( linkText.match( /vimeo/ ) ) {
        let vimeoID = replace.split( '/' ).slice(-1)[0];
        aLink.push( '<div class="video-wrapper"><iframe src="https://player.vimeo.com/video/' + vimeoID + '" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>' )
      }
      else {
        aLink.push( '<a href="' + replace + '" target="_blank">' + linkText + '</a>' );
      }
      text = text.split( linksFound[i] ).map(item => { return aLink[i].includes('iframe') ? item.trim() : item } ).join( aLink[i] );
    }
    return text;

  }
  else {
    return input;
  }
}

这会将纯文本中的长而笨拙的链接替换为该文本中的短可点击链接。（并且还将视频包装在响应式 iframe 中）

例子：

This clumsy link /sf/ask/3474439531/#52544985 is very clumsy and this http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split is not much better. This one www.apple.com is nice but www can be removed.

变成：

This clumsy link <a href="/sf/ask/3474439531/#52544985" target="_blank">stackoverflow.com</a> is very clumsy and this <a href="http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split" target="_blank">developer.mozilla.org</a> is not much better. This one <a href="http://www.apple.com" target="_blank">apple.com</a> is nice but www can be removed.

链接文本显示如下：

这个笨拙的链接stackoverflow.com非常笨拙，而这个developer.mozilla.org也好不了多少。这个apple.com很好，但是 www 可以删除。