为什么我的破折号/连字符在 onkeup javascript 后消失了

我正在尝试在 JavaScript 中用破折号/连字符替换空格字符。我让大部分代码正常工作，以便它在字符之间的每个空格后添加破折号（我不想连续使用 2 个破折号/连字符），但是一旦我击中另一个字符，破折号就会消失。也许我的代码格式不正确？

我正在尝试创建类似 LinkedIn 的东西，当您创建公司页面时，它会要求您创建公司 URL。当您点击空格时，它会将其替换为破折号/连字符。

function addHyphen(element) {

let ele = document.getElementById(element.id);

ele = ele.value.split('-').join(''); // Remove dash (-) if mistakenly entered.

let finalVal = ele.replace(/\s+/g, '-');

document.getElementById(element.id).value = finalVal;

document.getElementById("result").innerHTML = finalVal;

}

<!DOCTYPE html>

<html>

<head>

<title>Add Hyphen to a text using JavaScript</title>

</head>

<body>

<div>

</div>

<div>

</div>

</body>

</html>

慕无忌1623718

浏览 115回答 1

1回答

MM们

你可以做这样的事情：const $result = document.getElementById("result");function addHyphen($el) {  $el.value = hyphenize($el.value);  $result.innerHTML = $el.value;}function hyphenize(str) {  return str    .replace(/[^a-z0-9]/gi, '-') // Replace non-alphanumerical chars with '-'    .replace(/-+/g, '-'); // Deduplicate them}<div><input type="text" id="tbNum" onkeyup="addHyphen(this)" placeholder="Type some values here" /></div><div><label id="result"></label></div>

随时随地看视频慕课网APP