Question

我使用下面的函数来包装/解析带有a标记的字符串中的链接。这支持字符串中的纯链接，但也支持降价符号，如[title](link)。

但是我遇到了一个问题：当链接没有//时，如何在href属性中填充//？

测试数据：

google.com                     // ok: leave this as is
www.google.com                 // error: need to add `//` in href value
http://google.com              // ok
http://www.google.com          // ok
[google](google.com)           // error: need to add `//` in href value
[google](www.google.com)       // error: need to add `//` in href value
[google](http://google.com)    // error: need to add `//` in href value

请参阅JS fiddle

var markdownParse = (function() {

  return {
    autoLinks: function(text, options) {
      var simpleURLRegex = /\b(((https?|ftp|dict):\/\/|www\.)[^'">\s]+\.[^'">\s]+)(?=\s|$)(?!["<>])/gi;
      text = text.replace(simpleURLRegex, '<a href=\"$1\">$1</a>');
      return text;
    },
    stripLinkDefinitions: function(text) {
      text = text.replace(/\[(.*?)\]\((.*?)\)/gi, '<a href="$2">$1</a>');
      return text;
    },
  }
})();

$('.convert').on('click', function() {
	var inputVal = $('.input').val();
  
  inputVal = markdownParse.autoLinks(inputVal);
  inputVal = markdownParse.stripLinkDefinitions(inputVal);
  
  $('.output').html(inputVal)
});

.convert {
  cursor: pointer;
}
.output {
  white-space: pre;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<textarea class="input"></textarea>

<div class="output"></div>

<div class="convert">convert</div>

Answer 1

您可以将replace方法与回调函数一起使用。然后该函数可以添加http://前缀，如果它还没有。

通过使用回调，您还可以在一个正则表达式替换调用中处理这两种情况：

var markdownParse = (function() {
  return {
    autoLinks: function(text, options) {
      var simpleURLRegex = 
        (options && options.stripDefinitions ? '\\[(.*?)\\]\\((.*?)\\)|' : '()()')
        + '\\b(?:(?:https?|ftp|dict):\\/\\/|www\\.)[^\'">\\s)]+\\.[^\'">\\s)\\.]+';
      return text.replace(new RegExp(simpleURLRegex, "gi"), function (all, name, url) {
        url = url || all;
        if (url.indexOf('://') === -1) url = 'http://' + url;
        return '<a href="' + url +  '">' + (name || all) + '</a>';
      });
    },
  }
})();


$('.convert').on('click', function() {
  var inputVal = $('.input').val();
  var options = {
    stripDefinitions: $('#markdown').is(':checked')
  }
  inputVal = markdownParse.autoLinks(inputVal, options);
  $('.output').html(inputVal);
  $('.outHTML').text(inputVal);
});

.input {
  width: 100%;
  height: 70px;
}
.output, .outHTML {
  white-space:pre;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="input">You can reach google.com via www.google.com or even
http://google.com and http://www.google.com. Put it like 
[google](google.com) or like [google](www.google.com) or like [google](http://google.com).
</textarea><br>
<button class="convert">Convert</button><input id="markdown" type="checkbox" checked>support markdown
<div class="output"></div>
<div class="outHTML"></div>

options参数可用于指示是否也应识别降价。

正则表达式在超链接之前添加`//`

1 个答案: