Extract data using regular expression

Question

I have these text fields.

<input type="text" value="<p>aaaaaaaaaaa</p>" id="tab_4_0_li_div_content"><input type="text" value="lab" id="tab_4_0_li_data"><input type="text" value="<p>dddd</p>" id="tab_4_1_li_div_content"><input type="text" value="client" id="tab_4_1_li_data">

Here tab_4_*_li_data is a <li> html of tab , and tab_4_0_li_div_content is id of <div> which will be show on <li> click.

Now I want to extract data from this input fields using regular expression. For example

client,lab

as key and

<p>aaaaaaaaaaa</p>,<p>dddd</p>

as value of key.

If you see these are related to each others.

tab_4_0_li_div_content        tab_4_0_li_data
<p>aaaaaaaaaaa</p>             lab

tab_4_1_li_div_content        tab_4_1_li_data
<p>dddd</p>                    client

Div content part can content any thing, It's an text area. So how we do this?

Here we go! http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454 — Katana314, Oct 21 '14 at 20:46
Why in the world do you need a regular expression to get the data from attributes? — epascarello, Oct 21 '14 at 20:47
@epascarello Because here numbers in key element is dynamic. For example it may be tab_15_50_li_div_content or tab_5_20_li_div_content — neooo, Oct 21 '14 at 20:54

epascarello · Accepted Answer · 2014-10-21T23:08:24.467

There is no reason to have to use a regular expression to parse HTML. One thing, you are not going to have a good time going it. Second, use the power of the DOM

var contents = $("[id$=content]");  //find the elements that have an id that end with content
var datas = $("[id$=data]");   //find the elements that have an id that end with data
var details = {};  //object to hold results
datas.each( function(i) { details[datas[i].value] = contents[i].value; });  //start looping and generate the object with the details you are after
console.log(details);  //Object {lab: "<p>aaaaaaaaaaa</p>", client: "<p>dddd</p>"}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" value="<p>aaaaaaaaaaa</p>" id="tab_4_0_li_div_content"><input type="text"   value="lab" id="tab_4_0_li_data"><input type="text" value="<p>dddd</p>" id="tab_4_1_li_div_content"><input type="text" value="client" id="tab_4_1_li_data">

Now that code assumes the data and content elements are in the same order, if not, than it would require a little processing, but it is not that hard to do.

    var datas = $("[id$=data]");
    var details = {};
    datas.each(function(i, elem) {
      var id = elem.id;
      var val = $("#" + id.replace("data", "div_content")).val();
      details[elem.value] = val;
    }); 
    console.log(details); //Object {lab: "<p>aaaaaaaaaaa</p>", client: "<p>dddd</p>"}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" value="<p>aaaaaaaaaaa</p>" id="tab_4_0_li_div_content">
<input type="text" value="lab" id="tab_4_0_li_data">
<input type="text" value="<p>dddd</p>" id="tab_4_1_li_div_content">
<input type="text" value="client" id="tab_4_1_li_data">

I have these text fields, not as a string. But thanks for the help, i will try to modify it. — neooo, Oct 21 '14 at 21:20
So than it should just be a jquery selector instead of a string. It is the same exact thing. — epascarello, Oct 21 '14 at 22:57

Johan Karlsson · Answer 2 · 2014-10-21T21:43:02.857

0

You can do it like this:

function getValuesById(id1,id2){
    var vals = {};
    if(id1 === undefined)
        id1 = "\\d+";
    if(id2 === undefined)
        id2 = "\\d+";

    $("input").each(function (index, value) {
        console.log(new RegExp('tab_(' + id1 + '_' + id2 + ')_li_data'));
        var match = value.id.match(new RegExp('tab_(' + id1 + '_' + id2 + ')_li_data'));
        if (match) {
            vals[value.value] = $("#tab_" + match[1] + "_li_div_content").val();
        }
    });
    return vals;
}

Here I search through all input fields and match against tab_DIGITS_DIGITS_li_div_data and put that as a key and corresponding li_div_content as value in object values.

Check it out here: JSFiddle

UPDATE: I have updated the code to a function where you can send in a parameter to your two numerical values and will use any number if not supplied, i.e. use as getValuesById(4) for values like tab_4_*_li

edited Oct 21 '14 at 21:43

answered Oct 21 '14 at 21:18

Johan Karlsson

6,419
1
19
28

Suppose if we have tab_4 as id, Now we want to search those fields which have tab_4_*, So how we can? – neooo Oct 21 '14 at 21:28
I modify your example. http://jsfiddle.net/84c4y2uz/2/ Please check is this correct. – neooo Oct 21 '14 at 21:34
@DesipicforuBlogspot I updated mine before seeing you did a change, read update: in my answer :), but your thing should work as well. – Johan Karlsson Oct 21 '14 at 21:44

Extract data using regular expression

2 Answers2