jQuery以字符串格式抓取标签内的文本并添加到数组答案

【问题标题】：jQuery Grab Text inside a Tag in String Format and Add to ArrayjQuery以字符串格式抓取标签内的文本并添加到数组
【发布时间】：2016-06-17 17:00:33
【问题描述】：

我有一个类似于

的字符串

 Lorem Ipsum is simply dummy text of the printing and typesetting
 industry.<grab> First Item</grab>Lorem Ipsum is simply dummy text of
 the printing and typesetting industry.<grab>Second Item</grab>Lorem
 Ipsum is simply dummy text of the printing and typesetting
 industry.<grab>Third Item</grab>Lorem Ipsum is simply dummy text of
 the printing and typesetting industry.

现在我需要获取<grab>....</grab> 标签之间的所有文本并将它们添加到两个数组中。我试过了，但它没有通过

var data = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab> First Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Second Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Third Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.';

var array = $('<grab>').map(function() {
  return $(this).text();
}).get();
$('body').append(array);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

你能告诉我怎么做吗

【问题讨论】：

标签： javascript jquery

【解决方案1】：

这些实际上不是 DOM 元素，所以可能正则表达式会帮助你。

var data = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab> First Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Second Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Third Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.';
var r = /<grab>(.*?)<\/grab>/g;
var grabs = data.match(r).map(function(x){
   return x.replace(r,'$1');
});
console.log(grabs);

【讨论】：

谢谢nicael，但这也返回了grab标签？
@Beh 如果您认为这是最佳答案，请点击复选标记。
当然，我只是在等 10 分钟！

【解决方案2】：

尽管可以选择正则表达式，但最简单的方法是简单地使用 DOM 解析（元素类型是否自定义似乎并不重要）：

var data = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry <grab> First Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Second Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Third Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.',

    // creating a <div> element with the data string
    // as its innerHTML:
    elem = $('<div />',{
      'html' : data
    }),

    // using find() to retrieve the <grab> elements from
    // within the newly-created <div>, and using map()
    array = elem.find('grab').map(function () {
      // ...to return the trimmed text of each
      // found element:
      return this.textContent.trim();

      // converting the map to an Array:
      }).get();

// appending the joined array (joining the array together
// with a comma-white-space sequence) to the <body>:    
$('body').append(array.join(', '));
// => First Item, Second Item, Third Item

var data = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry <grab> First Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Second Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Third Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
    
    elem = $('<div />',{
      'html' : data
    }),
    array = elem.find('grab').map(function () {
      return this.textContent.trim();
      }).get();

$('body').append(array.join(', '));

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

我从这个简单的答案中学到了很多东西。这里使用的所有 JavaScript/jQuery 方法都跨浏览器兼容吗？
它们应该是，据我所知，它们是（除了“旧 IE”（IE 版本 8 及更低版本），因为 jQuery 在 2.x 分支中缺乏对这些浏览器的支持。虽然我认为使用的所有方法都可以在 1.x 的后续分支中使用
stackoverflow.com/a/18326717/5076162 表示 textContent 在 ie7/8 中不可行。请更新您的代码。