2016-06-25 3 views
-1

私は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 

はあなたがコールバック関数でreplaceメソッドを使用することができ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() { 
 
\t 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>

答えて

2

を参照してください。この関数は、まだ接頭辞がない場合はhttp://という接頭辞を追加することができます。

コールバックを使用することによって、あなたはまた、呼び出しを置き換える1つの正規表現で両方のケースを扱うことができます。オプションのパラメータは値下げも認識すべきかどうかを示すために使用することができます

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>

+0

この正規表現は2つの関数を混合しますか?どのように2つの機能に戻って分ける? – user1775888

+0

なぜあなたはそれをしたいですか? – trincot

+0

私はこのライブラリを呼び出すことができるので、オプションは '[]()'スタイルマークダウンまたはインラインリンクを使用するように選択します – user1775888

関連する問題