javascript - 使用javascript重写输入值添加 "#"

Question

我想通过在前面添加“#”来替换输入的内容，但在写入空格时它无法正常工作。

function mayus(texto) {
  var text = texto.value.replace('#', '');
  var words = text.split(" ");
  var newTexto = "";
  for (var i = 0; i < words.length; i++) {
    if (words[i].length > 0) {
      newTexto += "#" + words[i];
    } else {
      newTexto += " ";
    }
  }

  texto.value = newTexto;
};

<form class="form-horizontal" method="POST" action="addEvent.php">
  <div class="form-group">
    <label for="etiquetas" class="col-sm-2 control-label">Etiquetas</label>
    <div class="col-sm-10">
      <textarea name="etiquetas" class="form-control" id="etiquetas" placeholder="escriba y separe con espacio las etiquetas a usar" required onkeyup="mayus(this);" style="color: blue;">      </textarea>
    </div>
  </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-info" data-dismiss="modal">Cerrar</button>
    <button type="submit" class="btn btn-primary">Guardar</button>
  </div>
</form>

Answer 1

我们可以简化您的功能。首先，我们使用 startsWith 查看该值是否已以 # 开头。如果是的话我们就回来。如果没有，我们将其添加到开头。

function mayus(texto) {
  let val = texto.value
  let result = val.split(' ').map(item => !item.startsWith('#') && item != '' ? '#' + item : item)
  texto.value = result.join(' ')
}

<form class="form-horizontal" method="POST" action="addEvent.php">
  <div class="form-group">
    <label for="etiquetas" class="col-sm-2 control-label">Etiquetas</label>
    <div class="col-sm-10">
      <textarea name="etiquetas" class="form-control" id="etiquetas" placeholder="escriba y separe con espacio las etiquetas a usar" required onkeyup="mayus(this);" style="color: blue;"></textarea>
    </div>
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-info" data-dismiss="modal">Cerrar</button>
    <button type="submit" class="btn btn-primary">Guardar</button>
  </div>
</form>