时间戳

首页 > 解决方案 > 如何在 JavaScript 中为字母添加逗号

javascript - 如何在 JavaScript 中为字母添加逗号

问题描述

当用户键入数字或字母时，我正在尝试添加逗号。实际上，我为它应用了正则表达式，它适用于数字。当用户输入数字时，它会在每个输入中添加逗号，但是当我输入字母时它不起作用。有人可以帮我如何接受正则表达式来接受数字和字母。

谢谢

正则表达式

value.replace(/\B(?=(\d{1})+(?!\d))/g, ",");

标签： javascript

解决方案

更新

如果要插入逗号，每次按回车键时，只需使用以下表达式修复逗号：

/         BEGIN
(?<=\w)   POSITIVE LOOKBEHIND - PRECEDED BY WORD_CHAR
\b        WORD BOUNDARY
[\s,]*    ZERO OR MORE - WHITE_SPACE OR COMMA_CHAR
\b        WORD BOUNDARY
/         END
g         FLAGS = GLOBAL


const VK_ENTER = 13
const txt = document.querySelector('#sample-text')

const insertComma = (value) => value.replace(/(?<=\w)\b[\s,]*\b/g, ' , ')

const handleEnterKey = (e) => {
  var code = e.keyCode ? e.keyCode : e.which
  switch (code) {
    case VK_ENTER:
      txt.value = insertComma(txt.value)
      break
  }
}

document.addEventListener('keydown', handleEnterKey)
<form autocomplete="off" onsubmit="return false;">
  <input type="text" id="sample-text" value="" />
</form>

现在来点完全不同的……</h1>

注：原答案

您可以通过删除当前逗号并将它们重新添加到正确的位置来侦听文本输入更改并交换值。

对于这个例子，如果你输入：“Hello 12345”，文本最终会变成：“Hello 12,345”

const TYPE_AHEAD_DELAY = 0 // No delay
const SAMLE_TEXT = "Hello / 12345 / World"

let state = {
  sampleText: ''
}
  
const main = () => {
  state = createState(state) // Wrap the state in a proxy
  init()
  autoType('sampleText', SAMLE_TEXT, 250)
}

const processValue = (value, model) => {
  switch (model) {
    case 'sampleText':
      return fixCommas(value)
    default:
      return value
  }
}

const fixCommas = (value) => value
  .replace(/(\d),(\d)()/g, '$1$2')       // Revert commas
  .replace(/(\d)(?=(\d{3})+\b)/g, '$1,') // Add commas back

const autoType = (prop, value, timeout) => {
  let pos = 0, interval = setInterval(() => {
    state[prop] += value[pos++]
    if (pos >= value.length) {
      clearInterval(interval)
    }
  }, timeout)
}

/* #BEGIN BOILERPLATE */

const createState = (state) => {
  return new Proxy(state, {
    set(target, property, value) {
      target[property] = processValue(value, property)
      render(property)
      return true
    }
  })
}

const init = () => {
    Object.keys(state).forEach(property => {
    const input = document.querySelector(`[data-model="${property}"]`)
    let timeout
    input.addEventListener('keyup', (e) => {
      if (TYPE_AHEAD_DELAY) {
        if (timeout) clearTimeout(timeout)
        timeout = setTimeout(() => {
          listener(e)
        }, TYPE_AHEAD_DELAY)
      } else {
        listener(e)
      }
    })
  })
}

const listener = (event) => {
    const {type, value, dataset} = event.target
  state[dataset.model] = value
}

const render = (property) => {
  document.querySelector(`[data-model="${property}"]`).value = state[property]
}

main()
<input type="text" data-model="sampleText" />

推荐阅读