javascript - 使用破折号将文本转换为 url

Question

检查下面的代码。现在，如果我在 pTitle 中放入一些文本，当我按下键盘上的空格时，它会在我输入的单词之间生成一个 - 克隆破折号。但问题是，在我按下下一个单词后，上一个 - 破折号也会在 - 和单词之间删除，它还​​会产生一个我不想要的自动空格。现在告诉我如何解决 - 自动删除问题？有什么建议吗？另外，一个 fiddle link附上供快速检查

HTML:

pTitle: <input type="text" id='pTitle' name="fname"><br>
<br>
pUrl: <input type="text" id='pUrl' name="lname"><br>

Jq代码:

$('#pTitle').keyup(function (e) {
            if (e.keyCode === 32) {
                $('#pUrl').val($(this).val()+'-');
            } else {
                $('#pUrl').val($(this).val());
            }

            var charNumber = e.currentTarget.value.length;
            if (charNumber === 0) {
                $('#pUrl').val('#');
            }
        });

Answer 1

您可以使用 .replace() 将空格替换为连字符。三元方程允许 url 为输入值长度 == 0 的“#”(例如，如果您输入了文本，然后删除所有字符)，或者如果输入中有文本，则为连字符的文本。

$('#pTitle').keyup(function (e) {
  var newVal = $(this).val();
  newVal.length == 0 
  ? $('#pUrl').val('#')
  : $('#pUrl').val(newVal.replace(/ /g,'-'));
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
pTitle: <input type="text" id='pTitle' name="fname"><br>
<br>
pUrl: <input type="text" id='pUrl' name="lname"><br>