How not to display / filter out special characters? (CSS or Javascript)

Tags: javascript,css,angularjs,hide,special-characters

Problem :

I'm getting HTML content from a JSON file. The JSON file returns attributes name and description.

The name is clean data, like "Cheese burger". But the description looks like this ["Mozarella","Pepperoni","Cheese","Beef","Ketchup"].

Is it possible to tell CSS not to display the special characters: [",

Is it possible to filter out the special characters with javascript / AngularJS?

Solution :

You can use replace() with regexp to replace special characters type by type :

var descriptionString = '["Mozarella","Pepperoni","Cheese","Beef","Ketchup"]';

var cleanBracketsLeft = descriptionString.replace(/\[/g, '');
var cleanBracketsRight = cleanBracketsLeft.replace(/\]/g, '');
var cleanQuotes = cleanBracketsRight.replace(/\"/g, '');
var cleanComma = cleanQuotes.replace(/\,/g, ' ');

//Result Mozarella Pepperoni Cheese Beef Ketchup

See live exemple

See also a Regular Expression tutorial

    CSS Howto..

    How to embed a php/javascript photogallery in a page of an html/css website?

    How to achieve this CSS layout? [closed]

    Showing a time countdown progress bar

    How to declare css “global” height? Inside the html file or inside the css file?

    How do I create a cut-out hexagon shape?

    How to scope efficiently javascript et css on a rails appliacation?

    How to completely fill screen with smaller elements?

    How to get correct overflow for proper div with fixed footer?

    How to change color of text from left to right along with the background?

    How to scale html font size in Bootstrap 4 without breaking responsive navbar

    How to hide and show div with button? How to add effect to the button when show the div?

    How to transform simple CSS box

    How to fix an overlapping image in CSS?

    How can I override CSS inherited properties

    How do I get two side by side divs displayed correctly inside a bordered, dynamic height content area?

    Fixed Header Scrollable Table - How to preserve horizontal scroll position using css jquery on page loads

    How to apply different image styles to the same image used on main html page and pop up modal

    Position:Absolute; Div is making the page too wide and adding blank space to the side. How do I reduce its size?

    How to add a background Image using CSS that looks like a border down each side of a div

    How to get content of particular column of html page after split using css-rule(-webkit-column-width:)

    How to center a navigation bar properly? [closed]

    How do I center “my” navigation bar?

    How to select 3rd div which has specific css class

    how to give margin between li using css?

    How to create border corner spacing in CSS

    How to apply styles to an element with a prefixed ID?

    How to set button images based on browser type

    how to add a fixed position Box on left side of each post [closed]

    Force browsers load CSS before showing the page

    How can I customize the CSS generated by LESS to include Font Awesome?