Extract substring out of a string using Javascript

Question

All,

I have the following html as a string in javascript. I need to extract the string in "value", split by the specified delimeter "|" and put in two variables.

var html = '<div><input name="radBtn" class="radClass" style="margin:auto;" 
       onclick="doSomething();"
       value="Apples|4567" type="radio">
</div>';

Required output is two variables having the following values:

fruitName = Apples
fruitNumber = 4567

Note: There can be many radio buttons with the same name.

Everyone answering in this thread is not reading the problem. It's not HTML, it's a string. — wdm, Apr 27 '11 at 21:02

Neil · Accepted Answer · 2011-04-27T21:11:49.337

9

If you can assume that your HTML is always going to be simple (i.e. only one value attribute, and nothing else that looks like a value attribute), then you can do something like this:

var fruit = html.match(/value="(.*?)\|(.*?)"/);
if (fruit) {
    fruitName = fruit[1];
    fruitValue = fruit[2];
}

edited Apr 27 '11 at 21:11

answered Apr 27 '11 at 21:01

Neil

54,642
8
60
72

2

I really need to become more competent with regex. :/ – mattsven Apr 27 '11 at 21:07
@Vincent I added an extra `?` to my regex just in case there's another `|` in the string somewhere. – Neil Apr 27 '11 at 21:12

score 2 · Answer 2 · answered Apr 27 '11 at 20:56

2

Here's how you can do it:

$("input[name='radBtn']").click(function(){
    var val = $(this).val();
    val = val.split("|");

    var fruit = val[0];
    var number = val[1];
});

answered Apr 27 '11 at 20:56

Karl Laurentius Roos

4,360
1
33
42

score 1 · Answer 3 · answered Apr 27 '11 at 20:57

1

var div = document.createElement("div");
div.innerHTML = '<input name="radBtn" class="radClass" style="margin:auto;" onclick="doSomething();" value="Apples|4567" type="radio"></div>';  

var str = div.getElementsByTagName("input")[0].split("|");

var fruitName = str[0];
var fruitNumber = str[1];

/*
Now,
fruitName = "Apples"
and
fruitNumber = 4567
*/

answered Apr 27 '11 at 20:57

mattsven

22,305
11
68
104

I think you're looking to call split on the defaultValue property or value attribute rather than on the input element itself. – Neil Apr 28 '11 at 19:53

score 1 · Answer 4 · answered Apr 27 '11 at 21:12

Here's one way:

var fruit = (function() {
    var fruits = $(html).find('.radClass').val().split('|');
    return {
        fruitName: fruits[0],
        fruitNumber: fruits[1]
    };
}());

You'll get an object like this:

fruit.fruitName // Apples
fruit.fruitNumber // 4567

score 0 · Answer 5 · edited May 23 '17 at 12:34

0

var coolVar = '123-abc-itchy-knee';
var partsArray = coolVar.split('-');

// Will result in partsArray[0] == '123', partsArray[1] == 'abc', etc

see: How to parse a string in javascript?

edited May 23 '17 at 12:34

Community

1
1

answered Apr 27 '11 at 20:54

John K.

5,426
1
21
20

how do i get the value from the html string first? – Jake Apr 27 '11 at 20:55

score 0 · Answer 6 · answered Apr 27 '11 at 20:57

0

$(function() {
    $("INPUT[name=radBtn]").click(function() {
        var value = $(this).val().split("|");
        var fruitName = value[0];
        var fruitNumber = value[1];

        // Add to an array, ajax post etc. whatever you want to do with the data here
    });
});

answered Apr 27 '11 at 20:57

Rory McCrossan

331,213
40
305
339

i can't click on the radio button.. its in an html string.. please see the question again.. thanks – Jake Apr 27 '11 at 20:58
Ah I see, you want to get the values from the string before you append to the DOM. May I ask why? – Rory McCrossan Apr 27 '11 at 20:59

Extract substring out of a string using Javascript

6 Answers6

Linked