RegExp to match comma separated hostnames

Question

The problem

I\'m trying to validate the content of a </code> using JavaScript, So I created a <code>validate()</code> function, which returns <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5408099190056760" data-ad-slot="7305827575" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="fly-panel detail-box" id="flyReply"> <fieldset class="layui-elem-field layui-field-title" style="text-align: center;"> <legend>6条回答</legend> </fieldset> <ul class="jieda" id="jieda"> <li data-id="111" class="jieda-daan"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href=""> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000026.jpg" alt=" 星月不相逢 "> </a> <div class="fly-detail-user"> <a href="" class="fly-link"> <cite> 星月不相逢</cite> </a> <span>(楼主)</span> </div> <div class="detail-hits"> <span>2021-01-07 04:49</span> </div> </div> <div class="detail-body jieda-body photos"> <p> <p>I have been using this pattern for awhile, and seems to be working for your case, too:</p> <pre><code>/^[a-zA-Z0-9][a-zA-Z0-9\-_]*\.([a-zA-Z0-9]+|[a-zA-Z0-9\-_]+\.[a-zA-Z]+)+$/gi </code></pre> <p>The logic is simple:</p> <ul> <li><code>^[a-zA-Z0-9]</code>: The URL must start with an alphanumeric character</li> <li><code>[a-zA-Z0-9\-_]*</code>: The first alphanumeric character can be followed by zero or more of: an alphanumeric character, an underscore or a dash</li> <li><code>\.</code>: The first piece must be followed by a period.</li> <li>The second piece must follow the same pattern: <ol> <li><code>[a-zA-Z0-9]+</code>: One or more alphanumeric character, OR</li> <li><code>[a-zA-Z0-9\-_]+\.[a-zA-Z0-9]+</code>: One or more alphanumeric character, an underscore or a dash followed by a period and one or more alphanumeric character</li> </ol></li> </ul> <p>You can check this pattern working for most of your URLs in the following code snippet. How I do it is similar to the strategy described by others:</p> <ul> <li>Get the value of the textarea on keyup (or you can bind the submit, blur, keypress, keydown, change and etc)</li> <li>Split the value by the <code>,</code> character</li> <li>Use <code>$.trim()</code> to remove flanking whitespaces</li> <li>Use the RegEx pattern above to evaluate each individual string</li> </ul> <p>Optional, done for visual output:</p> <ul> <li>Generate a list of URLs</li> <li>Indicate if each URL entered is valid or not</li> </ul> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() { $('textarea').keyup(function() { var urls = $(this).val().split(','); $('ul').empty(); $.each(urls, function(i,v) { // Trim URL var url = $.trim(v); // RegEx var pat = /^[a-zA-Z0-9][a-zA-Z0-9\-_]*\.([a-zA-Z0-9]+|[a-zA-Z0-9\-_]+\.[a-zA-Z]+)+$/gi, test = pat.test(url); // Append $('ul').append('<li>'+url+' <span>'+test+'</span></li>'); }); }); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>textarea { width: 100%; height: 100px; } ul span { background-color: #eee; display: inline-block; margin-left: .25em; padding: 0 .25em; text-transform: uppercase; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea placeholder="Paste URLs here">