Как ограничить пространство на первой позиции в javascript / Angular

Question

У меня есть следующий regEx, чтобы разрешить пробелы в середине слова.

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

Как ограничить пространство в первой позиции, если поле ввода.Пробелы в середине разрешены.

Answer 1

Это немного похоже на CertainPerformance ответ , но сохраняет позицию каретки и не переходит к концу ввода

Править

Добавлена ​​визуальная обратная связь

;(() => {
  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">

Answer 2

Чередование между якорем начала строки (с ^), за которым следует пробел и остальная часть вашего отрицательного набора символов:

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

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

Answer 3

Просто trim строка перед вами replace это:

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

Answer 4

Вы можете использовать встроенный метод String trim().trim() метод в javascript удаляет пробелы из начала и конца строки.

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()

const a = '   hello '
console.log(a.trim())
// hello