The Domsanitizer is failing to convert special character codes into their respective symbols

Dealing with code conversions can be tricky. I am currently working on a project where I need to convert certain codes to their respective symbols. However, I have encountered some issues with the conversion process.

For example, when trying to convert apostrophe code to an actual apostrophe symbol, it works fine. But when dealing with double quotes code or ampersand code, the conversion does not seem to be working as expected. Here is the snippet of code that I have written so far:

let txt = 'Test"Name';
let txt2 = 'Test'Name';
txt = this.sanitizer.sanitize( SecurityContext.HTML, txt );
txt2 = this.sanitizer.sanitize( SecurityContext.HTML, txt2 );

const ul = this.renderer.createElement('ul');
const li = this.renderer.createElement('li');
const li2 = this.renderer.createElement('li');
const text = this.renderer.createText(txt);
const text2 = this.renderer.createText(txt2);

this.renderer.appendChild(li, text);
this.renderer.appendChild(li2, text2);
this.renderer.appendChild(ul, li);
this.renderer.appendChild(ul, li2);
this.renderer.appendChild(this.el.nativeElement, ul);

If you want to take a look at the code in action, check out the Stackblitz here.

Issue 1: Some codes are not being converted to their respective symbols.

Issue 2: Additionally, I have noticed that French characters like é are getting converted to code instead of showing the actual character (Updated the Stackblitz to demonstrate).

Answer №1

When using a sanitizer, it is important to convert values in order to safely utilize them in the browser's DOM.

To ensure converted values are correctly assigned, it is recommended to use the innerHTML property instead of text nodes.

const ul = this.renderer.createElement('ul');
const li = this.renderer.createElement('li');
const li2 = this.renderer.createElement('li');
li.innerHTML = txt;   // <- inner html
li2.innerHTML = txt2; // <- inner html

this.renderer.appendChild(ul, li);
this.renderer.appendChild(ul, li2);
this.renderer.appendChild(this.el.nativeElement, ul);

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

Exploring Angular2: Understanding how to retrieve an object with an unknown key

I am trying to showcase a specific value from different objects within a template. The path of the desired value depends on the object being referenced. For example: let obj = { "a": "a", "b": { "1": "1", "2": "READ ME" } } let ...

In TypeScript, how can we specify that a key is mandatory for an object but it can be referred to by two different names?

Essentially, I'm faced with a situation where I need to handle a style object that must contain either the maxHeight or height properties. If one of these properties is included, the other becomes unnecessary. Despite my efforts, I have been unable to ...

Guide on redirecting to a different page and showing a flash message in Next.js

Currently working on Reactjs and nextjs, my goal is to submit a form using axios(Api). The form submission is successful, but I would like the page to change after submitting the form (displaying Allblogs.js, similar to a redirect) along with a flash mes ...

Vuex fails to trigger updates on Vue computed properties

I have been integrating vuex as a middleware between firestore and my vue application. The structure of my vuex store is as follows: const store = new Vuex.Store({ state: { posts: [], }, mutations: { add_post(state, post) { ...

What steps should I take to set up search paths for node modules in Code Runner within Visual Studio Code?

Just recently, I embarked on a Javascript course and successfully configured my Visual Studio Code to run JavaScript. Check out the code snippet that I came up with: const prompt = require('prompt-sync')(); var fname = prompt("First name please : ...

Fresh class retains the characteristics of the former class

As I navigate my way through learning jQuery, I've encountered a puzzling issue that I can't seem to solve. No existing articles seem to address my specific problem, so I am turning to this platform in hopes of finding a solution. I'm puzz ...

Location of the observable space

I have set up a spherical mesh with a texture and positioned a perspective camera to enable a 360-degree view inside out. this.camera = new THREE.PerspectiveCamera(this.fov, $(this.element).width() / $(this.element).height(), 0.1, 1000); this.camera.setLe ...

Exceeded maximum stack size error encountered in Ionic 2 Tab bar functionality

When I attempt to incorporate a tab bar into my application, an error message saying "Maximum call stack size exceeded" is displayed Profile.html <ion-tabs> <ion-tab tabIcon="water" tabTitle="Water" ></ion-tab> <ion-tab tabI ...

retrieving the html select element located within a table td

My code snippet consists of the following HTML elements: <table> <tr> <td><select name="day"> </select></td> <td><select name="time"> </select></td> &l ...

.NET Core ViewModel with IFormFile attribute causing AJAX Request to freeze

Users now have the option to upload images for a retail product within an Add/Edit Product modal. Product Modal ViewModel: public class ProductModalViewModel { public ProductModalViewModel() { Product = new ProductDTO(); Images = ...

Sharing Angular 2 modals across different components

My Angular 2 app consists of several components, including a modal component that I added from here. Now, I want to find a way to use the same modal across multiple components. Is it possible to have one modal open when different buttons are clicked in var ...

Tips for choosing text within an HTML <label> tag

Here is the HTML code provided: <label for="xxxx" id="Password_label"> <div class="xxxx">Password 555</div> 555 <div class="xxx"></div> </label> I am attempting to replace the text "555" that appears inside th ...

Angular Directive causing the generation of redundant elements

I am facing an issue with my Angular directive where it seems to be generating duplicate button and ul elements with the class "dropdown" after each specified element. The directive works perfectly when implemented using plain JavaScript. Can anyone identi ...

The use of dates (YYYY-MM-DD) as identifiers in HTML/Angular 2 is causing issues

I have successfully created a calendar using html in Angular 2, and now I am looking to incorporate events into it. These events should be able to color specific days, add a dot inside the cell, or something similar. I have a json file that contains the ev ...

What are the steps to setting up an intelligent LAN or corporate npm registry for storing node.js packages?

Is it possible to set up a smart local network or company npm registry for node.js packages? This registry should act as a proxy, fetching only the necessary packages when needed, rather than simply mirroring the main registry. This concept is similar to ...

Adding a custom button to CkEditor 5 in Angular 12: Step by step tutorial

How can I customize the toolbar in version 4 of Ckeditor 5 by adding a unique button? I have tried looking through the documentation, but have been unsuccessful in achieving my goal. ...

JS/jQuery functions cannot retain events or data when modifying a duplicated DOM element

I'm relatively new to JavaScript and jQuery, and currently working on developing a plugin for form controls that dynamically adds and removes elements containing inputs and values to be stored in a database later. The approach I'm taking involve ...

Having trouble with using findByIdAndUpdate and push in MongoDB?

As someone who is new to Mongodb, I have been using the findByIdAndUpdate function to update a document in my project. However, I noticed that it returns the old document instead of the updated one. Below is the code snippet of my function: exports.crea ...

"Triggering the scrollTop animation will trigger the scroll event to

I am facing an issue with my code that tracks the scrolling of a page. It successfully performs the necessary action when the "page" changes, but I am having trouble preventing the scroll event from being triggered when animating the scrollTop to the neare ...

collapse each <b-collapse> when a button is clicked (initially shown)

I am facing an issue with a series of connected b-buttons and b-collapse, all initially set to be visible (open). My goal is to hide them all when a toggle from my parent.vue component is activated - so upon clicking a button in the parent component, I wa ...