如何在javascript / Angular中的第一个位置限制空间

Question

我使用下面的regEx允许在单词中间留空格。

oninput="this.value = this.value.replace(/[^A-Za-z0-9-,.;'&/.() ]/g,'')"

如何在输入框内限制第一位置的空间。 中间可以有空格。

Answer 1

您可以使用内置的String方法XmlHttpRequest。 javascript中的trim()方法从字符串的开头和结尾删除空格。

trim()

this.value = this.value.trim()
 // if you want to apply regex also, you can try the below code
 this.value = this.value.replace(/[^A-Za-z0-9-,.;'&/.() ]|^ /g,'').trim()

Answer 2

在字符串开头的定位符（带有const centerLocation = new google.maps.LatLng( Number(28.555040), Number(77.241920) ); const mapProp = { center: centerLocation, zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP, clickableIcons: true }; this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp); const location = new google.maps.LatLng( Number(28.555040), Number(77.241920) ); for (let i = 0; i < userData.length; i++) { this.marker = new google.maps.Marker({ position: new google.maps.LatLng(+userData[i][1], +userData[i][2]), map: this.map, icon: this.userimage, title: userData[i][0] }); // tslint:disable-next-line:no-shadowed-variable google.maps.event.addListener(this.marker, 'click', (function (marker, i) { return function () { infowindow.setContent('<a href="#">' + userData[i][0] + '</a>'); infowindow.open(this.map, this); }; })(this.marker, i)); } const infowindow = new google.maps.InfoWindow(); for (let i = 0; i < eventData.length; i++) { this.marker = new google.maps.Marker({ position: new google.maps.LatLng(+eventData[i][1], +eventData[i][2]), map: this.map, icon: this.image, title: eventData[i][0] }); // tslint:disable-next-line:no-shadowed-variable google.maps.event.addListener(this.marker, 'click', (function (marker, i) { return function () { infowindow.setContent('<a href="#">' + eventData[i][0] + '</a>'); infowindow.open(this.map, this); }; })(this.marker, i)); } // console.warn(location); this.marker.setPosition(location); this.heatmap = new google.maps.visualization.HeatmapLayer({ data: heatmapData, dissipating: true, radius: 50 }); this.heatmap.setMap(this.map); // For heatmap color const gradient = [ 'rgba(0, 255, 255, 0)', 'rgba(0, 255, 255, 1)', 'rgba(0, 191, 255, 1)', 'rgba(0, 127, 255, 1)', 'rgba(0, 63, 255, 1)', 'rgba(0, 0, 255, 1)', 'rgba(0, 0, 223, 1)', 'rgba(0, 0, 191, 1)', 'rgba(0, 0, 159, 1)', 'rgba(0, 0, 127, 1)', 'rgba(63, 0, 91, 1)', 'rgba(127, 0, 63, 1)', 'rgba(191, 0, 31, 1)', 'rgba(255, 0, 0, 1)' ]; this.heatmap.set('gradient', gradient); // For heatmap color this.heatmap.set('opacity', 0.6); ）后跟一个空格，以及其他否定字符集：

^

oninput="this.value = this.value.replace(/[^A-Za-z0-9-,.;'&/.() ]|^ /g,'')"

Answer 3

trim之前的字符串replace：

oninput="this.value = this.value.trim().replace(/[^A-Za-z0-9-,.;'&/.() ]/g,'')"

Answer 4

此功能的工作方式有点像CertainPerformance的answer，但是保存了插入符的位置，并且不会跳到输入的结尾

编辑

添加了一些视觉反馈

;(() => {
  const inp = document.querySelector('#inp');
  
  const nospaces = function(elem) {
    // find spaces at start of input
    const spacesReg = /^\s+/;
    let match
    if (match = elem.value.match(spacesReg)) {
      // save current caret position
      const pos = elem.selectionStart;
      const len = match[0].length;
      elem.value = elem.value.replace(spacesReg, '');
      // reset caret position
      elem.selectionStart = elem.selectionEnd = Math.min(0, pos - len)
      return true
    }
    return false
  }
  
  const onlyAllowedCharacters = function(elem) {
    // search for not allowed characters
    const allowed = "A-Za-z0-9-,.;'&/.() ";
    const notAllowedReg = new RegExp(`(.*?)[^${allowed}]`);
    // prevent infinite loop
    var max = 255;
    let match;
    let blink = false
    // replace one not allowed character per loop run
    while ((max > 0) && (match = elem.value.match(notAllowedReg))) {
      blink = true
      const pos = elem.selectionStart;
      const len = match[1].length
      elem.value = elem.value.replace(notAllowedReg, '$1');
      elem.selectionStart = elem.selectionEnd = pos - 1
      max--
    }
    return blink;
  }
  
  const blink = function(elem, duration = 200) {
    const to = setTimeout(() => {
      elem.classList.remove('blink')
    }, duration)
    elem.classList.add('blink')
  }
  // use function literal to get correct `this` value
  inp.addEventListener('input', function(e) { 
    const nosp = nospaces(this);
    const only = onlyAllowedCharacters(this);
    if (nosp || only) {
      blink(this)
    }
    
  })
})();

.blink {
  background: red;
}

No spaces at start of input<br>
Only allowed characters a–zA–Z0–9-,.;'&\.()<br>
<input type="text" id="inp">