Javascript Replace on button click

Question

I'm running a small javascript replace to replace text on a button click and I can't see why it's not working. Could anybody tell me what i'm doing wrong?

http://jsfiddle.net/zg4VB/2/

$("#button").click(function() {
    $("#editme").value = replaceLinks($("#editme").val());
})

function replaceLinks(text) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(exp,"[url=$1]$1[/url]"); 
}

j08691 · Accepted Answer · 2013-03-13 16:29:39Z

3

Two issues. First, $("#editme").value = replaceLinks($("#editme").val()); should be $("#editme").val(replaceLinks($("#editme").val()));

Second, your button ID was id="#button" and should be id="button"

jsFiddle example

answered Mar 13, 2013 at 16:29

j08691

208k33 gold badges269 silver badges281 bronze badges

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

2 Comments

Riddick Over a year ago

Something so simple! Thank you very much. (Will accept as answer when I can)

Alnitak Over a year ago

writing $(el).val(mutator_func($(el).val)) is wasteful and repetitious. jQuery allows you to just write $(el).val(mutator_func), per my answer.

Alnitak · Accepted Answer · 2013-03-13 16:40:07Z

2

.value is usually the direct property of a DOM Input element. The jQuery function to access or change an element's value is .val()

Usefully, .val() allows you to pass a function to mutate the current value. That function is passed the element's index and current value, and the function's return value replaces the original value. All you need to do is change the signature of your replaceLinks function to allow for the index parameter (which you can then safely ignore).

$("#button").click(function() {
    $('#editme').val(replaceLinks);  // calls `replaceLinks` to mutate its value
});

function replaceLinks(index, text) {
    ...
}

See http://jsfiddle.net/alnitak/XzrHP/

edited Mar 13, 2013 at 16:40

answered Mar 13, 2013 at 16:28

Alnitak

341k72 gold badges420 silver badges503 bronze badges

4 Comments

Explosion Pills Over a year ago

In the way he is using it above it would be a direct property of the jQuery collection

Alnitak Over a year ago

@ExplosionPills it would, if there were such a property.

Explosion Pills Over a year ago

By performing the assignment you create the property. Of course you wouldn't be able to retrieve it since the reference to the created object is lost immediately, but in theory you could. Whatever it is, it's not a property of the DOM node.

Alnitak Over a year ago

You're picking nits - all I was trying to say was that he was clearly trying to use the .value DOM property on a jQuery collection - a common mistake.

Explosion Pills · Accepted Answer · 2013-03-13 16:33:01Z

1

A couple problems: .value = should be .val(. It's used both to set and get the value. You also had the button ID as #button, but it should just be button.

You could also do $("#editme").val(replaceLinks); if you change the arguments of replaceLinks to function replaceLinks(_, text) {

http://jsfiddle.net/ExplosionPIlls/zg4VB/5/

$("#button").click(function() {
    $("#editme").val(replaceLinks);
})

function replaceLinks(_, text) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(exp,"[url=$1]$1[/url]"); 
}

If you want to use replaceLinks on strings as well, you could check arguments in replaceLinks as well: text = arguments[arguments.length - 1]

answered Mar 13, 2013 at 16:33

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

1 Comment

Alnitak Over a year ago

_ for unused parameters - Erlang programmer?

Collectives™ on Stack Overflow

Javascript Replace on button click

3 Answers 3

2 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related