Question

我需要操作输入有充分的理由。我有一个网站，客户购买一些社交媒体服务，并订购他们需要粘贴他们的链接。有些人写错/粘贴错误的网址，我需要以某种方式自动纠正它们。

这是html部分

<input name="link" id="link" value="" data-validation="required" class="form-control" placeholder="" type="text">

所以，如果有人粘贴/写，那就说

http://www.instagram.com/p/BVh_CbaA9Y1/
www.instagram.com/p/BVh_CbaA9Y1 /
instagram.com/p/BVh_CbaA9Y1 /

我需要以某种方式改变为

https://www.instagram.com/p/BVh_CbaA9Y1

第二个问题是“？”在网址

所以，如果有人粘贴/写，那就说

只有：

Answer 1

你可以这样做。它删除协议并获取参数，然后连接您的https协议和域。

const input = document.querySelector('#link')

const urls = [
  'http://www.instagram.com/p/BVh_CbaA9Y1/',
  'www.instagram.com/p/BVh_CbaA9Y1/',
  'instagram.com/p/BVh_CbaA9Y1/',
  '//www.instagram.com/p/BVh_CbaA9Y1/?get=param',
  'https://www.facebook.com/spiderdebigode/posts/1409535075841821?notif_id=15',
  'https://www.facebook.com/photo.php?fbid=10214957270023041',
]

const normalizeUrl = url => 
  'https://www.' +
    url
      .slice(0, url.indexOf('?')) // cut out the get params
      .replace(/(https?\:)*(\/\/)*(www\.)*/, '') // remove the protocol

// on changing the input, normalize the input value
input.addEventListener('change', e => {
  input.value = normalizeUrl(input.value)
}, false)

// test each format of url
urls.forEach(url => {
  console.log(normalizeUrl(url))
})

* { box-sizing: border-box } input { width: 100%; padding: .5em; }

<input class="form-control" 
  name="link" 
  id="link" 
  value="" 
  data-validation="required" 
  placeholder="Enter you url here, on change it will be normalized" 
  type="text">

我需要操纵输入区域

1 个答案: