为什么我的破折号/连字符在 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>
<input type="text" id="tbNum" onkeyup="addHyphen(this)" placeholder="Type some values here" />
</div>
<div>
<label id="result"></label>
</div>
</body>
</html>
慕无忌16237181回答
-
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
相关分类
JavaScript