Почему мой символ тире/дефис исчезает после включения 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>

В строке, где вы прокомментировали // Remove dash, вы... убираете все тире

— 13.12.2020 00:16

Я знаю, что эта линия была проблемой. Как убедиться, что нет двух последовательных тире/дефисов?

— 13.12.2020 00:31

javascript html

13.12.2020 00:12

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

173

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете сделать что-то вроде этого:

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>

13.12.2020 00:37

Другие вопросы по теме

Как я могу интерполировать строку из переменной в успехе метки начальной загрузки с помощью тимелеафа

Показ заголовка вниз при прокрутке вверх: JavaScript HTML

Тег <img> не работает внутри тега <td> при автоматическом создании из файла JavaScript

Как получить доступ к данным файла .har в формате JSON?

Воздействие на весь блок div с помощью функции ondblclick

Двойная прокрутка с параллаксом реактивной пружины и реактивным трехволоконным холстом

Использование Font Awesome Unicode с Coldfusion

Добавить возможность выбора элемента с помощью javascript или jquery не работает

Как сделать так, чтобы перетаскиваемый div удалялся при перетаскивании div

Что такое документ?

Почему мой символ тире/дефис исчезает после включения javascript

Ответы 1

Другие вопросы по теме

Похожие вопросы