automatic replace with jquery regex

Question

i have $("#text") and i want to make it so that when you type the word 'replace me' into $("text"), it is automatically replaced with the phrase 'replaced successfully' and 'goodbye' with 'hello'

i'm assuming the right way to go about doing this would be to find 'replace' with regex and replace it and this is about as far as i've gotten

          $('#text').keydown(function(){
                var text = $('#text').text();
                var replaceCommand = ['replace me', 'goodbye'];
                var replaceOutput = ['replaced successfully', 'hello'];
                    for (var i=0; i < replaceCommand.length; i++){
                        text.replace(replaceCommand[i]/i, replaceOutput[i]);
                    }
            });

what is the problem, does it work or does replacement show up?? — bingjie2680
– bingjie2680, Commented Jul 24, 2012 at 10:15

Jithin · Accepted Answer · 2012-07-24 10:25:22Z

2

No need to use regex if your replaceCommand array contains defined strings. Use .replace() instead.

Demo

var replaceCommand = ['replace me', 'goodbye'];
var replaceOutput = ['replaced successfully', 'hello'];

$('#text').keyup(function(){
    var text = $('#text').val();
    for (var i=0; i < replaceCommand.length; i++){
        text = text.replace(replaceCommand[i],replaceOutput[i]);
    }
    $('#text').val(text);
});

Update 1 : I hope you are $('#text') is a text box. So you need to get the value using $('#text').val(). Also .replace() will return the replaced string. So you need to assign again it to the textbox value.

answered Jul 24, 2012 at 10:25

Jithin

2,6041 gold badge24 silver badges42 bronze badges

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

1 Comment

Jithin Over a year ago

okay, so where are you typing in? You can't type into a div. There must be an input element. Can you update the question with the html?

TRR · Accepted Answer · 2012-07-24 10:21:52Z

1

Use blur of the text box instead. the below code doesn't use regex though Let me know if the below code helps:

 $('#text').blur(function(){ 
var text = $('#text').text(); 
var replaceCommand = ['replace me', 'goodbye']; 
var replaceOutput = ['replaced successfully', 'hello'];     
if($(this).val() == replaceCommand [0]){
$(this).val(replaceOutput[0]) ;
    }
else if($(this).val() == replaceCommand [1]){
$(this).val(replaceOutput[1]) ;
    }

});

Working JSFIDDLE

answered Jul 24, 2012 at 10:21

TRR

1,6434 gold badges26 silver badges43 bronze badges

2 Comments

gardensity Over a year ago

that's an interesting approach but it didn't help

TRR Over a year ago

Check the fiddle which i shared.. works fine there....Can you set up a demo on Jsfiddle so that we can have a look?

Graham · Accepted Answer · 2012-07-24 10:17:02Z

0

It's as good a way as any, but not sure I would use keydown as it will fire on every keypress. But if you must have it as soon as the last character of the word replace has been entered then key down is the one (or key up).

However, it will not fire if it is pasted in via the mouse. So you will need to also trap mouse events.

If the value in the box is all you need then an onchange will do the trick, but won't fire until you lose focus (different browsers will behave differently).

answered Jul 24, 2012 at 10:17

Graham

8,25122 gold badges78 silver badges127 bronze badges

1 Comment

bingjie2680 Over a year ago

but won't fire until you lose focus??? that is not right...it fires whenever the state changes.

M Abbas · Accepted Answer · 2012-07-24 12:33:57Z

0

You would try something like this:

$('#text').bind("keydown blur", function(){
                var jText = $(this);
                var newTxt = jText.val().replace(/replace(?!\s*successfully)/gi, "replace successfully");
                jText.val(newTxt);
            });

Example

edited Jul 24, 2012 at 12:33

answered Jul 24, 2012 at 12:22

M Abbas

6,4994 gold badges37 silver badges48 bronze badges

Collectives™ on Stack Overflow

automatic replace with jquery regex

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related