Question

我有一个对象数组，其中一些对象值包含我需要删除的HTML标记。

我尝试循环遍历它，然后在元素上使用jQuery函数unwrap()，但是我收到了unwrap不是函数的错误。

var tempData = w2ui.grid.records;

// Modify our tempData records to remove HTML
$.each(tempData, function(key, value) {
    value.unwrap('a');
});

我的结构如下：

Array [ 
    Object,
    Object,
    Object
]

对象/属性的示例：

Object = {
    Name: 'Bob',
    email: 'bob@gmail.com'
    website: '<a href="http://www.example.com">Example.com</a>'
}

修改对象后的所需输出：

Object = {
    Name: 'Bob',
    email: 'bob@gmail.com'
    website: 'Example.com'
}

以下是我开始的一个简单例子：https://jsfiddle.net/zcwk1kw6/

该示例显示了包含HTML的单个值，但我的最终目标是从任何值中删除所有HTML，而不是针对特定属性。

最好的办法是什么？

Answer 1

$.each(data, function(key, value) {
  data[key].Website = $(value.Website).text();
});

这应该可以完成工作。

编辑：任何财产：

$.each(data, function(key, value) {
  $.each(value, function(_key, _value) {
     data[key][_key] = $('<div>'+_value+'</div>').text(); // <div></div> for those which are simply strings.
  });
});

Answer 2

另一种方法是使用document.createElement()创建一个元素，将innerHTML属性设置为文本，然后返回文本内容。

var data = [];
data.push({
  'Name': 'Bob',
  'Email': 'bob@gmail.com',
  'Website': '<a href="http://example.com">Example.com</a>'
}, {
  'Name': 'Joe',
  'Email': 'joe@gmail.com',
  'Website': '<a href="http://example2.com">Example2.com</a>'
});

// Loop over our array of objects and remove the HTML
$.each(data, function(key, value) {
  console.log(key, stripHtml(value.Website));
});

function stripHtml(html) {
  var tmp = document.createElement("DIV");
  tmp.innerHTML = html;
  return tmp.textContent || tmp.innerText || "";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

更新

根据你的updated question处理每个数据元素的任何属性，你可以迭代键

var data = [];
data.push({
  'Name': 'Bob',
  'Email': 'bob@gmail.com',
  'Website': '<a href="http://example.com">Example.com</a>'
}, {
  'Name': 'Joe',
  'Email': 'joe@gmail.com',
  'Website': '<a href="http://example2.com">Example2.com</a>'
});

// Loop over our array of objects and remove the HTML
$.each(data, function(elementIndex, dataElement) {
    $.each(dataElement, function(valueIndex, value) {
      console.log(valueIndex + ': ', stripHtml(value));
    });
});

function stripHtml(html) {
  var tmp = document.createElement("DIV");
  tmp.innerHTML = html;
  return tmp.textContent || tmp.innerText || "";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

使用正则表达式：

// Loop over our array of objects and remove the HTML
$.each(data, function(key, value) {
  var val = value['Website'];
  console.log(val.replace(/\<.*?\>(.*?)\<.*?\>/, '$1'));
});

https://jsfiddle.net/zcwk1kw6/1/

Answer 4

你绝对不需要jQuery，就像其他所有答案一样。

您可以使用函数来剥离标记，例如使用Regexp。我从here获得了这个功能。

function stripTags(value) {
   return value.replace(/(<([^>]+)>)/gi, '');
}

然后你去：

 function parseSingleObject(object) {
   return Object.entries(object).reduce((carry, [key, value]) => {
     carry[key] = stripTags(value);

     return carry;
    }, {});
 }

 var data = [];

 console.log(data.map(parseSingleObject));

在这个片段中，我使用的是ES6的一些语法，如果你不打算这样做（可能需要转换代码以支持旧浏览器），代码所做的只是遍历数组中的所有元素，使用{ {1}}，然后对于每个条目，它调用一个名为data.map的函数，它接收一个对象，用键/值（parseSingleObject）迭代所有，然后使用{{{ 1}}功能。

Javascript从对象值

4 个答案:

更新