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 = {
    Name: 'Bob',
    email: '[e-mail]'
    website: '<a href="http://www.example.com">Example.com</a>'
}

修改对象后期望的输出：

Object = {
    Name: 'Bob',
    email: '[e-mail]'
    website: 'Example.com'
}

这里有一个我准备的快速示例 fiddle：https://jsfiddle.net/zcwk1kw6/

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

如何最好地解决这个问题？

- SBB

---

每个 Object.website 都会像 '<a href="http://www.example.com">Example.com</a>' 一样，只是 URL 不同吗？ - Justin Taddei

链接可能不同，但我只需要删除HTML链接，如果“所有HTML”是一个选项，我可能会采取这种方法来未雨绸缪。 - SBB

尝试使用 $(value).unwrap('a');。请注意 value 周围的 $()。 - 01010011 01000010

@0101001101000010 - 这会修改实际对象吗？这就是我需要的。我运行了它，但HTML还在那里。 - SBB

顶层是否可以有文本与外部标签相邻？如果是，那就会变得更加复杂。 - user1106925

@squint - 不，它将始终是 <a href="link">Text</a>。 - SBB

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

- mehulmpt

---

有没有办法使其不仅限于单个属性？JSON 是动态的，因此它不总是只有“网站”。我试图针对所有 HTML 链接进行定位，而不管它们的键是什么。例如，可能会有 Facebook 链接或博客链接等。我想要做到的是，在不硬编码所有可能选项的情况下，只需说“查看所有值，删除 HTML”。 - SBB

@SBB 请在您的帖子末尾添加该问题，或者提出一个新的问题。 - Sᴀᴍ Onᴇᴌᴀ

@SBB 你需要进一步迭代该值，以检查是否存在其他超链接。我已经更新了代码。 - mehulmpt

这个完美地运行了。使用第二个例子，它从原始数据对象中删除了所需的HTML。 - SBB

本来也想发同样的内容。虽然JSON很大时我不会使用$.each。另外，要将其作为字符串查看，请使用JSON.stringify()。jsFiddle：https://jsfiddle.net/kpduncan/vdpd7re3/ - thekodester

Answer 2

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

var data = [];
data.push({
  'Name': 'Bob',
  'Email': '[e-mail]',
  'Website': '<a href="http://example.com">Example.com</a>'
}, {
  'Name': 'Joe',
  'Email': '[e-mail]',
  '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>

更新：

根据您关于处理每个数据元素的任何属性的更新问题，您可以遍历键。

var data = [];
data.push({
  'Name': 'Bob',
  'Email': '[e-mail]',
  'Website': '<a href="http://example.com">Example.com</a>'
}, {
  'Name': 'Joe',
  'Email': '[e-mail]',
  '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>

- Sᴀᴍ Onᴇᴌᴀ

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/

- hassan

Answer 4

在这种情况下，你绝对不需要使用 jQuery，因为其他答案中都使用了它。

你可以使用一个函数来去除标签，例如使用正则表达式。我从这里得到了这个函数。

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的函数，该函数接收一个对象，迭代所有带键/值的内容（Object.entries），然后将所有带值的内容解析为stripTags函数。

- Edmundo Santos