How to override/replace string on target input with jquery

Question

I have 2 input boxes. 1=original, 2=result. I want to replace the space in the #box2 with "-" (dash).

So I have:

$("#box1").on('input', function() {
  var stts = $(this).val();
  dashed = stts.replace(/ /g, "-");
  $("#box2").val(dashed);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="box1" placeholder="original" />
<input type="text" id="box2" placeholder="dashed string" />

But the problem is when the original box1 having "-" inside. When a space is pressed. There're double dashed "--" in the destination.

The question is : how to override the original "-" (dash). So it have only one "-" inside the destination? - https://jsfiddle.net/kcsyjrmL/

Working here : https://jsfiddle.net/kcsyjrmL/4/ (thnx to gurvinder372)

Working2 : https://jsfiddle.net/kcsyjrmL/5/ (thanx to Jp Mohan, fixing space-space)

Please dont update your question with an answer that has been provided. It causes issues with the context of your question and takes away from answers that have been provided below. Accept an answer but leave the original question intact unless required to make it clearer — Master Yoda
– Master Yoda, Commented Jan 18, 2018 at 13:40

gurvinder372 · Accepted Answer · 2018-01-18 13:35:48Z

3

how to override the original "-" (dash). So it have only one "-" inside the destination?

Replace space with \s+

dashed = stts.replace(/(\s|\-)+/g, "-");

Demo

$("#box1").on('input', function() {
  var stts = $(this).val();
  dashed = stts.replace(/(\s|\-)+/g, "-");
  $("#box2").val(dashed); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="box1" placeholder="original" />
<input type="text" id="box2" placeholder="dashed string" />

edited Jan 18, 2018 at 13:35

answered Jan 18, 2018 at 12:58

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Wilf Over a year ago

Thanks a million!

Wilf Over a year ago

It's seem to have a further fix. When I pressed " - " (space-space) it come up with "---" (triple dashes). How to fix, please?

Master Yoda Over a year ago

Why would you use bind() instead of on()? bind was deprecated back in 3.0. Even OP is using the on() function.

gurvinder372 Over a year ago

@MasterYoda I took it from OP's fiddle.

gurvinder372 Over a year ago

@MasterYoda I have used on anyways now. Agree with you on - not changing their own code while the question is not closed.

|

Jp Mohan · Accepted Answer · 2018-01-18 13:10:25Z

1

Try this,

This will make sure multiple adjacent occurences of '-' will be made to a single '-'

dashed =stts.replace(/ /g,"-").replace(/--+/g, '-');

answered Jan 18, 2018 at 13:10

Jp Mohan

1582 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to override/replace string on target input with jquery

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related