jquery - Javascript remove HTML from Object Values - Stack Overflow

admin管理员组

文章数量:1335877

I have an array of objects and some of those object values contain HTML tags that I need to remove.

I tried looping over it and then using the jQuery function unwrap() on the element but I received an error that unwrap wasn't a function.

var tempData = w2ui.grid.records;

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

My structure is as follows:

Array [ 
    Object,
    Object,
    Object
]

---

Example of the object/properties:

Object = {
    Name: 'Bob',
    email: '[email protected]'
    website: '<a href="">Example</a>'
}

Desired Output after modifying object:

Object = {
    Name: 'Bob',
    email: '[email protected]'
    website: 'Example'
}

Here is a quick example fiddle I started: /

The example shows a single value containing HTML but my end goal is to remove all HTML from any value, not targeting a specific property.

Whats the best way to approach this?

I have an array of objects and some of those object values contain HTML tags that I need to remove.

I tried looping over it and then using the jQuery function unwrap() on the element but I received an error that unwrap wasn't a function.

var tempData = w2ui.grid.records;

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

My structure is as follows:

Array [ 
    Object,
    Object,
    Object
]

---

Example of the object/properties:

Object = {
    Name: 'Bob',
    email: '[email protected]'
    website: '<a href="http://www.example.">Example.</a>'
}

Desired Output after modifying object:

Object = {
    Name: 'Bob',
    email: '[email protected]'
    website: 'Example.'
}

Here is a quick example fiddle I started: https://jsfiddle/zcwk1kw6/

The example shows a single value containing HTML but my end goal is to remove all HTML from any value, not targeting a specific property.

Whats the best way to approach this?

• javascript
• jquery
• html
• strip

Share Improve this question Follow edited Feb 28, 2017 at 19:18 Sᴀᴍ Onᴇᴌᴀ 8,29588 gold badges3737 silver badges6060 bronze badges asked Feb 28, 2017 at 18:55 SBBSBB 8,9903535 gold badges118118 silver badges234234 bronze badges 6

• Will every Object.website resemble '<a href="http://www.example.">Example.</a>' but with different urls? – Justin Taddei Commented Feb 28, 2017 at 18:58
• The links could be different, it should only be HTML links I am needing to remove but if "All HHTML" is an option, I'd probably take that approach to future proof it. – SBB Commented Feb 28, 2017 at 18:59
• Try $(value).unwrap('a');. Notice the $() around value. – 01010011 01000010 Commented Feb 28, 2017 at 18:59
• @0101001101000010 - Is this going to modify the actual object? That's what I am needing. I ran this but if left the HTML there. – SBB Commented Feb 28, 2017 at 19:02
• Could there be text at the top level, adjacent to the outer tags? If so, it gets a little more plicated. – user1106925 Commented Feb 28, 2017 at 19:02

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 5

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

This should get the job done.

EDIT: For any property:

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

using regex :

// 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/zcwk1kw6/1/

Another way to do this is to create an element with document.createElement(), set the innerHTML property to the text and then return the text content.

var data = [];
data.push({
  'Name': 'Bob',
  'Email': '[email protected]',
  'Website': '<a href="http://example.">Example.</a>'
}, {
  'Name': 'Joe',
  'Email': '[email protected]',
  'Website': '<a href="http://example2.">Example2.</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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Update:

Per your updated question about handling any property of each data element, you can iterate over the keys

var data = [];
data.push({
  'Name': 'Bob',
  'Email': '[email protected]',
  'Website': '<a href="http://example.">Example.</a>'
}, {
  'Name': 'Joe',
  'Email': '[email protected]',
  'Website': '<a href="http://example2.">Example2.</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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You definitely don't need jQuery for this, as used in all others answers.

You can use an function to strip your tags, using Regexp for example. I got the function from here.

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

Then you go:

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

     return carry;
    }, {});
 }

 var data = [];

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

In this snippet I'm using some syntax of ES6, if you're not intending do this (may require transpiling your code for support old browsers), what the code does is just go through all elements from array, using data.map, then for every entry, it calls a function named parseSingleObject, that receive an object, iterates over all with keys/values (Object.entries), then parses all with values in the stripTags function.

本文标签： jqueryJavascript remove HTML from Object ValuesStack Overflow