Search and Replace with variable using jquery

Question

i want to search and replace an entire string that has changing text inside it

Example:

<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>

To:

Australia
Austria
Azerbaijan
Bahamas
Bahrain
Bangladesh

The problem is of course that changing value... meaning value="$var"... How can search and replace all occurrences using jquery / javascript.

Would appreciate your help.

You want to retrieve the text from the <option> elements? And put them where? — David Thomas
– David Thomas, Commented Aug 17, 2014 at 11:05
The chaning value in this case is 1st option: AU, 2nd option: AT and so on.its easy for to use the string.replace for xxx some string xxx. the problam (for me) start when i try to replace xx12x some string xxx, xx23 some string xxx, etc (hope this clears it) ;) - sometimes its hard to explaing these things from a distance. — Sagive
– Sagive, Commented Aug 17, 2014 at 12:58

Andrei CACIO · Accepted Answer · 2014-08-17 10:37:21Z

2

Have you tried this approach:

$('option').each(function() {
   var text = $(this).text();
   $(this).after(text);
   $(this).remove();
});

I can't test it right now but it should do the job. Let me know how it goes.

OR

You can try this way:

$('option').html(function(index, html)
    return html.replace(/<option[^>]*>([^<]+)<\/option>/g, "$1");
});

Good luck!

answered Aug 17, 2014 at 10:37

Andrei CACIO

2,12915 silver badges28 bronze badges

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

2 Comments

T.J. Crowder Over a year ago

@SagiveSEO: Of course, this leaves you with text directly inside whatever contained the option elements, which was presumabl a select, datalist, or optgroup, none of which is meant to have straight text in it I don't think (not entirely sure about how datalist is supposed to handle that)... :-)

Sagive Over a year ago

thats exactly what i needed - i was actully looked for something i could turn into a flexible tool since i need this feature a lot and create a localized page i can use to change string which have a varible - this was easy to customize to that end. thanks a lot ;)

T.J. Crowder · Accepted Answer · 2014-08-17 10:36:22Z

2

If I'm reading your question right, you're dealing with a string, not with elements, so you can use String#replace:

theString = theString.replace(/<option[^>]*>([^<]+)<\/option>/g, "$1");

replace looks for special sequences in the replacement string, and fills them in from information on the matched occurrence. In this case, I'm using a capture group to capture the bit between <option...> and </option>, then using $1 to replace the overall match with the content of the first capture group.

Complete example: Live Copy *(I've added <br> between them just for output purposes):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
<script>
  (function() {
    "use strict";

    var theString =
        '<option value="AU">Australia</option><br>' +
        '<option value="AT">Austria</option>' +
        '<br><option value="AZ">Azerbaijan</option>' +
        '<br><option value="BS">Bahamas</option>' +
        '<br><option value="BH">Bahrain</option>' +
        '<br><option value="BD">Bangladesh</option>';

    theString = theString.replace(/<option[^>]*>([^<]+)<\/option>/g, "$1");
    display(theString);

    function display(msg) {
      var p = document.createElement('p');
      p.innerHTML = String(msg);
      document.body.appendChild(p);
    }
  })();
</script>
</body>
</html>

answered Aug 17, 2014 at 10:36

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

1 Comment

Sagive Over a year ago

i love this, much more flexible than other solutions offered here. Testing... brb.

vch · Accepted Answer · 2014-08-17 11:10:28Z

0

This should work:

$('select').children().each(function(i,el){
    $(el).val($(el).text());   
});

Of course, this assumes that's the only select element on the page. If not, you'll either have to choose the right one, hopefully using it's id or, if not maybe using eq().

answered Aug 17, 2014 at 11:10

vch

2112 silver badges5 bronze badges

Collectives™ on Stack Overflow

Search and Replace with variable using jquery

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related