how to extract element values from an array and store them into another array.Javascript

Question

I have an array with certain values with a <span> element attached to them, something like this:

var array = [
    'Asia <span class="hide">1234</span>', 
    'Ireland <span class="hide">65dhh</span>', 
    'US West<span class="hide">323-hth</span>', 
    'Asia Pacific <span class="hide">ap-ss-1</span>', 
    'US West <span class="hide">us-323223-1</span>'
]

where the values inside the <span> are the unique ids for the values of the country. now I'm trying to retrieve only the values inside the <span> and ignore the countries values, like in the o/p I want to have an array of:

 var newarray = ["1234, 65dhh, 323-hth,ap-ss-1..."];
   // I tried using the ```split``` function, but returns undefined

newarray.push(record[0].getValue().forEach(function(e){e.split('<span class="hide">')})

any ideas on this? thanks

If the text format is a simple as this, then grabbing everything between `>` and `<` might be enough. — Felix Kling, Jan 15 '19 at 18:29
Span elements or strings with `...` in them? They very different so please clarify. — Reinstate Monica Cellio, Jan 15 '19 at 18:35
this is great, thank you all for the help, appreciate a lot! — user1234, Jan 15 '19 at 18:44

score 1 · Answer 1 · answered Jan 15 '19 at 18:37

1

One possible way:

array.reduce((acc, ele) => {
    const temp = ele.match(/<span.*?>(.*)<\/span>/)[1];
    return temp ? acc.concat(temp) : acc;
}, [])

I'm using reduce because I'm not sure if all elements has a <span> tag. If so, a map works as well.

answered Jan 15 '19 at 18:37

guijob

4,413
3
20
39

1

thanks guijob, yes the `````` element is constant, so i think I could use map, but this answer helped me solved another issue I was having, thanks a lot – user1234 Jan 15 '19 at 18:45

score 1 · Answer 2 · answered Jan 15 '19 at 18:40

Add the map method to the list of possible solutions with the same regular expression.

var array = [
    'Asia <span class="hide">1234</span>', 
    'Ireland <span class="hide">65dhh</span>', 
    'US West<span class="hide">323-hth</span>', 
    'Asia Pacific <span class="hide">ap-ss-1</span>', 
    'US West <span class="hide">us-323223-1</span>'
];

var newArr = array.map(val => {
  return val.match(/<span class="hide">(.*?)<\/span>/)[1];
});

console.log(newArr);

David Thomas · Answer 3 · 2019-01-15T18:53:50.237

I'd suggest the following:

// defining a simple function, taking a string of HTML and a selector:
const textFromNode = (htmlString, nodeSelector) => {

  // defining an element to contain the provided HTML str]irng:
  let temp = document.createElement('div');

  // assigning the htmlString as the innerHTML of the created element:
  temp.innerHTML = htmlString;

  // taking the results of the node.querySelectorAll() method and converting
  // into an Array, using Array.from(); and then mapping that Array:
  return Array.from(temp.querySelectorAll(nodeSelector)).map(

    // returning the textContent of the node variable (a reference to the current
    // node in the Array of nodes), using String.prototype.trim() to remove leading
    // and trailing whitespace:
    (node) => node.textContent.trim()
  );
}

let array = [
    'Asia <span class="hide">1234</span>',
    'Ireland <span class="hide">65dhh</span>',
    'US West<span class="hide">323-hth</span>',
    'Asia Pacific <span class="hide">ap-ss-1</span>',
    'US West <span class="hide">us-323223-1</span>'
  ],

  // using Array.prototype.map() to return an Array based upon the
  // array Array of strings:
  ids = array.map(
    (html) => {

      // returning the results of the textFromNode() function:
      return textFromNode(html, '.hide');
    })
  // using Array.prototype.reduce() to flatten the resulting Array:
  .reduce((cur, acc) => {
    return acc.concat(cur);
  }, []);

console.log(ids);

The benefit of this approach is that it avoids relying upon regular expressions (obligatory link to the infamous "RegEx match open tags except XHTML self-contained tags]"), and uses only the DOM API to more reliably recover strings from the required nodes.

References:

score 0 · Accepted Answer · answered Jan 15 '19 at 18:36

You can create the required array by mapping regex to each element of the original array:

const array = [
  "Asia <span class='hide'>1234</span>",
  "Ireland <span class='hide'>65dhh</span>",
  "US West<span class='hide'>323-hth</span>",
  "Asia Pacific <span class='hide'>ap-ss-1</span>",
  "US West <span class='hide'>us-323223-1</span>"
];

const newArray = array.map(item => item.replace(/.*<span.*>(.*?)<\/span>/, '$1'));

console.log(newArray);

how to extract element values from an array and store them into another array.Javascript

4 Answers4