如何从一个数组中提取<span>元素值并将其存储到另一个数组中。爪哇语

Question

我有一个数组，其中包含某些值，并附加了一个<span>元素，如下所示：

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>'
]

其中<span>中的值是国家/地区值的唯一 ID。 现在我尝试仅检索<span>中的值并忽略国家/地区值，就像在 o/p 中一样，我想有一个数组：

 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">')})

对此有什么想法吗？谢谢

Answer 1

一种可能的方法：

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

我正在使用reduce，因为我不确定是否所有元素都有<span>标签。如果是这样，map也可以。

Answer 2

将 map 方法添加到具有相同正则表达式的可能解决方案列表中。

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);

Answer 3

我建议如下：

// 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);

这种方法的好处是它避免了依赖正则表达式（指向臭名昭著的"RegEx 匹配开放标签，XHTML 自包含标签除外]"的强制性链接），并且仅使用 DOM API 更可靠地从所需节点恢复字符串。

引用：

• Array.from() .
• Array.prototype.map() .
• Array.prototype.reduce() .
• 箭头函数。
• String.prototype.trim() .

Answer 4

您可以通过将正则表达式映射到原始数组的每个元素来创建所需的数组：

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);