javascript - 如何限制我的 url 只接受 linked-n 链接作为输入

Question

我创建了一个用户个人资料，其中用户只能添加 LinkedIn URL

我试过了

pattern="^http(s)?:\/\/(www)?\.linkedin\.com\/in\/.*$";

html 中的正则表达式，但它限制任何东西。我还在js中添加了user-linkedin，除了linked-in链接。但如果我输入 abc_name 它将显示

https://www.linkedin.com/in/abcname

但如果我输入 https://www.google.com 那么它会准确显示网址。

html:

<input type="text" class="user-linkedin" id="user-linkedin" placeholder="LinkedIn Profile ID">

js:

userDetails.linkedin = 'http://www.linkedin.com/in/' + userDetails.linkedin.replace('http://www.linkedin.com/in/', '').replace('https://www.linkedin.com/in/','');

$(subpage.selector + ' .user-linkedin').val(userDetails.linkedin);
$(subpage.selector + ' .linkedin-link').attr('href',userDetails.linkedin);

Answer 1

如果我正确理解了您的要求，并且您需要一个正则表达式来仅匹配个人资料链接中的链接，则以下内容应该可以满足您的需求:

^http(s)?:\/\/(www\.)?linkedin\.com\/in\/.*$

<form>
  <input pattern="^http(s)?:\/\/(www\.)?linkedin\.com\/in\/.*$" />
  <button>Submit</button>
</form>

<小时/>

如果您需要检查输入是否是有效链接并使用 Jquery 将其插入 DOM 中的某个位置，您可以按如下方式执行操作:

$(".user-linkedin").on('input', function(event) {
  var validLink = /^http(s)?:\/\/(www\.)?linkedin\.com\/in\/.*$/.test(event.target.value)
    ? event.target.value
    : '';
  $(".linkedin-link")
    .text(validLink || 'invalid link')
    .attr("href", validLink);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="user-linkedin" />
<br>
Link: <a href="" class="linkedin-link"></a>