`Can someone provide instructions for eliminating HTML entities from JSON data?`

Currently, I am developing an RSS feed application using AngularJS with JSON data as a base. You can check out the progress here.

So far, I have successfully extracted the post titles and content. However, I encountered an issue while handling the content data. My goal is to remove all HTML entities from it and present it in a clean format similar to the Pocket app:

Specifically, I aim to display:

  1. Plain text content (maintaining the paragraph structure from the source feed)
  2. Center aligned images
  3. Hyperlinks
  4. List items (both unordered and ordered)
  5. Videos (from embed tags, if any are present)

I have looked into ngSanitize but found it challenging to comprehend how to utilize it for the desired outcome.

Any suggestions on how to accomplish this?

javascriptregexjsonangularjs

Answer №1

If you are seeking a way to eliminate HTML tags from JSON content, then look no further. Here is the solution using data extracted from your sample JSON:

Input: 

var json = {
    "content": "<p>One of the many new features in <a title=\"WordPress 3.5\" href=\"http://codex.wordpress.org/Version_3.5\">WordPress 3.5</a> is the Iris color picker. <a title=\"Replace Farbtastic color picker\" href=\"http://core.trac.wordpress.org/ticket/21206\"> Iris replaces the, now deprecated, Farbtastic</a> color picker script. The new Iris color picker is shown off in the Theme Customizer for the Twenty-Twelve theme.</p>\n<p><img class=\"aligncenter size-full wp-image-1634\" src=\"http://rachelbaker.me/wp-content/uploads/2012/11/WordPress-theme-customizer-color-picker2.png\" alt=\"\" /></p>\n<p>As soon as I saw Iris, I fell in love. She is user-friendly, colorful and fun. I found that implementing the new color picker is <a title=\"Adding Farbtastic to WordPress Widgets\" href=\"http://pippinsplugins.com/adding-the-farbtastic-color-picker-to-your-wordpress-widgets/\">very similar to Farbtastic</a>.</p>\n<h3>Iris Color Picker Demo Plugin</h3>\n<p>To use the Iris color picker in a plugin requires:</p>\n<ol>\n<li>Running a version of WordPress that is 3.5 Beta or higher.</li>\n<li>Loading the &#8216;wp-color-picker&#8217; script and style into your plugin options page.</li>\n<li>Adding a text input for your color value to your plugin options page.</li>\n<li>Writing a custom jQuery script to call Iris&#8217;s wpColorPicker method on your color text input field(s).</li>\n</ol>\n<p><strong>How does the code look for implementing steps 2-4?</strong><br />\nI created a demonstration plugin to help answer that. The plugin doesn&#8217;t do anything itself, it is only intended as a guide for developers interested in using the new Iris color picker in a WordPress plugin.</p>\n<p><a class=\"button\" href=\"https://github.com/rachelbaker/iris-color-picker-demo\">View on Github</a></p>\n<p><img class=\"aligncenter size-full wp-image-1635\" src=\"http://rachelbaker.me/wp-content/uploads/2012/11/screenshot-iris-color-picker-demo.jpeg\" alt=\"Iris Color Picker Demo Plugin\" /></p>\n"
};
var someString = 
json.content.replace(/<\/?([a-z][a-z0-9]*)\b[^>]*>/gi, '').
replace(/&#[0-9]+;t/gi,"").replace(/\[/g,"").replace(/\]/g,""); 


console.log(someString);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How come my FormData POST request isn't being blocked by CORS policy?

I am facing confusion with one query: why does my POST request, which sends form data from a frontend hosted on a different origin to a backend hosted on a different origin, not get blocked by CORS policy? My Node.js code includes the following: const exp ...

javascriptnode.jsapiaxiosmulter

Passing new data from child component to parent component via state update

In my project, I have a parent component that keeps track of whether a file has been clicked or not. The files are passed from a child component to the parent. Initially, I thought I could use props and call a function from the parent, but when I tried i ...

javascriptreactjs

Automatically calculate the quantity of pie charts to showcase and present each one individually on a CanvasJS-generated page

I am looking to create multiple pie charts dynamically and display them together on a webpage. The number of pie charts needed will be determined by the elements in a JSON object. Here is an example of how the data will be structured: [ { "id" : "12 ...

javascriptjsonpie-chartcanvasjs

Before inserting a string into JSON in PHP, the length of the string should be included

When sending a POST variable containing a JavaScript dictionary to a PHP file via Ajax, the value of this POST variable is being parsed as a PHP dictionary. However, I noticed that the length of each String value is added before the actual string in the PH ...

javascriptphpjsonajax

Sophisticated combinations of keys and values

Having a string of the following format: "key1=value1 key2=value2 key3=value3 key2=value6 ...." The keys are alphanumeric with no spaces and can repeat in the string. The values can contain any characters, including spaces, IP addresses, etc. Some exampl ...

javaregex

Filter products by pressing the "Enter" key while using the search input in

I have a list of products and I want to only display products that have a description or name containing the typed word when enter is clicked on the search input. Here is what I tried in my Search component: const Search = (props) => { return ( &l ...

javascriptreactjs

Looking to display a single Angular component with varying data? I have a component in Angular that dynamically renders content based on the specific URL path

I have a component that dynamically renders data based on the URL '/lp/:pageId'. The :pageId parameter is used to fetch data from the server in the ngOnInit() lifecycle hook. ngOnInit(){ this.apiHelper.getData(this.route.snapshot.params.pageId) ...

javascriptangulartypescriptangular-ui-routerangular13

What is the process for updating semi-structured data in Snowflake?

In one of the snowflake columns, we have a JSON object that stores a variable number of value/pairs, making the data semi-structured. What options do I have to update a specific value pair within the JSON object? Do I need to extract the entire JSON, con ...

jsonsnowflake-cloud-data-platform

Adjust the existing percentage of a never-ending CSS animation

I am looking to create a simple slider from scratch. The sliding functionality is working perfectly in an infinite loop, but I want to add the option for users to skip to specific slides (e.g. using arrows). @keyframes slider-ani { 0% { left: 33.3%; } ...

javascriptjquerycsscss-animations

I am experiencing difficulties in installing JavaScript libraries

PS D:\React> npm i -g expo-cli npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d48555d42004e41446d68c7b6d717268805a6369786964 ...

javascriptreactjsnpm

Arrow function returns itself, not the function

While working with React, I've been using utility functions for managing API calls. I noticed that when the arrow function is no longer anonymous, it successfully returns a pending promise – which is exactly what I want. However, if the arrow functi ...

javascriptnode.jsreactjs

What is the standard approach for exchanging localized user interface strings between Microsoft's MVC and JavaScript?

In the process of developing an application that utilizes a dynamic, javascript-based client, I am facing the need for localization. This particular application includes significant UI components that are not generated by Javascript and are instead served ...

c#javascriptasp.net-mvcasp.net-mvc-4

Creating a PNG file from a Uint8Array containing RGBA data

I am currently attempting to save a screenshot of a specific area in ThreeJS to a file. Initial attempts involved displaying the image in a new tab using: window.open(renderer.domElement.toDataURL("image/png")); The renderer object used has preserveDrawi ...

javascriptthree.jswebgl

Retrieving the newly inserted Id using nested queries in Express.js

I'm facing an issue with mysql nested queries in my express.js app where I am trying to retrieve the inserted id of all queries, but I am only getting the insertId of the global query. The error message I received is: TypeError: Cannot read property ...

javascriptnode.jsjsonexpress

Angular model is failing to get recognized

Why is it that when the button is clicked, two empty strings are added to the html page instead of the correct quote? Service: quotes.addData = function(quote){ quotesArr.push(quote); } Controller: $scope.quoteToAdd = { author : $scope.quote ...

angularjs

Adding a directive to create a table header

I'm having trouble with an angular directive that is meant to insert a table header. Unfortunately, instead of being placed inside the thead as intended, it ends up outside of the table element. Here's a link to the codepen: http://codepen.io/sac ...

javascripthtmlangularjs

Several socket.io sessions have been initiated

I'm fairly new to working with node.js and currently attempting to set up a server using socketio to send messages to the frontend (React). However, when running the server and multiple connections are being established, I encounter the following outp ...

javascriptnode.jsreactjswebsocketsocket.io

I am getting a HTTP 405 error indicating that the method is not allowed, and it appears to

In my Javascript program, I requested this URL using the library epson-2.6.0.js, which is the Epson SDK for JavaScript specifically designed for thermal printers. My target device is a TM U220 connected via ethernet. GET XHR http://192.168.199.15:8008/soc ...

javascriptajaxprintingcors

The rule 'react-hooks/exhaustive-deps' does not have a defined definition

I received an eslint error message after inserting // eslint-disable-next-line react-hooks/exhaustive-deps into my code. 8:14 error Rule 'react-hooks/exhaustive-deps' definition not found I tried to resolve this issue by referring to this p ...

javascriptreactjsreact-hookseslintstandardjs

What is the best way to halt a CSS transition using JavaScript when dealing with an image?

I am facing an issue while attempting to create a basic CSS transition using JavaScript. The goal is for the start button to trigger the movement of an element, based on the duration of the keyframe animation. Then, clicking the end button should make the ...

javascripthtmlcsscss-transitionscss-animations