Javascript 从对象值中删除 HTML

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/properties示例：

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

这是一个简单的例子 fiddle 我开始了：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 属性设置为文本，然后 return 文本内容。

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(/\<.*?\>(.*?)\<.*?\>/, ''));
});

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

Answer 4

您绝对不需要 jQuery，正如所有其他答案中所使用的那样。

您可以使用函数去除标签，例如使用正则表达式。我从 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 语法，如果你不打算这样做（可能需要转换你的代码以支持旧浏览器），代码所做的只是遍历数组中的所有元素，使用 data.map，然后对于每个条目，它调用一个名为 parseSingleObject 的函数，该函数接收一个对象，用 keys/values（Object.entries）遍历所有对象，然后用值解析所有对象在 stripTags 函数中。

Javascript 从对象值中删除 HTML

Javascript remove HTML from Object Values

javascript

jquery

html

strip

更新：