Tips for avoiding html entities in a string

To prevent any user-entered content from being interpreted as HTML, I need to escape it so that special characters like < become < in the markup. However, I still want to wrap the escaped content with actual HTML tags. The goal is to ensure that the HTML remains trustworthy even after escaping the user input.

Here is an example of the html code snippet:

<span ng-bind-html="trustHtml(notif.getConditionText())"></span>

Controller:

$scope.trustHtml = function(html) {
    return $sce.trustAsHtml(html);
}

Notif:

getConditionText: function() {
    return "<b>" + $sanitize(this.name) + "</b>";
}

I am searching for a method that can replace $sanitize and escape the user-entered "name" property value. For instance, if the user enters Seattle <rocks>, it should output the HTML as Seattle &lt;rocks&gt;.

Does anyone know of a solution like this for Angular?

Please note that I am not aiming to encode the characters into URI entities, but specifically into HTML entities.

javascriptangularjs

Answer №1

After conducting some research, I stumbled upon a helpful resource discussing how to convert special characters to HTML in Javascript. You can check it out here.

In the post, there is a function provided that allows you to encode HTML content:

function HtmlEncode(s)
{
  var el = document.createElement("div");
  el.innerText = el.textContent = s;
  s = el.innerHTML;
  return s;
}

While this solution is useful for plain Javascript, I was unable to find a direct AngularJS equivalent.

Hopefully, this information proves to be beneficial for your needs.

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

Is there a standard event triggered upon the closing of a browser tab or window?

Does React have a built-in event that is triggered when a browser tab or window is closed? If it does, does it have support across different browsers? ...

javascriptreactjs

Executing an HTML webpage with npm package.json file

I have recently discovered package.json files and am new to using them. I have created an HTML webpage using three files: HTML, CSS, and JavaScript. Currently, I open the HTML file directly in my browser but have been advised to use a package.json file a ...

javascriptnode.jsnpm

Create the final APK file using Phonegap build directly from your local machine, without the need to

While I've been using Phonegap CLI to develop my android apps and everything has been working well, I encountered an issue when trying to create the final .apk file. I have all the necessary tools - SDK, JDK, Java, and environment variables configure ...

javascriptandroidcordovaphonegap

Issue with JavaScript HTML Section Changer not functioning properly

I need to implement a button that switches between two pages when pressed. Although the code seems simple, I am struggling to make it work. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"& ...

javascripthtmlcss

Incrementing a variable based on a condition in JavaScript

Currently, I am working on a project where I have a variable called "total" that needs to be assigned a number (or price) and then incremented when certain options are selected or checked. Below is the code that I have developed up to this point. This sni ...

javascriptjqueryvariablesif-statementconditional-statements

What is the best way in jQuery to show each element of an array one at a time with a space in an input field?

I have a large array filled with strings that I want to display one by one in a text field, automatically concatenated with a space bar. Below is my code: <script> x = 0; function abc() { for (i = 0; i < words[x].length; i++) { ...

javascriptjquery

Prevent the event from bubbling up on active elements

Having trouble with stopping event propagation? Picture this situation: <table id="test"> <tbody> <tr> <td class="row"> </td> <td class="row"> </td> <td class="ro ...

javascriptjquery

Strategies for efficiently parsing JSON in HTML using AngularJS

I have received this JSON format and I am looking to extract the message and username fields. How can I achieve this? Also, I want to format the date in Y-m-d format. I tried using ng-repeat but couldn't print the data. Can someone please help me disp ...

angularjsjson

Issue with unit testing in Firestore: Anticipated data type was supposed to be 'DocumentReference', however, what was received was a unique Firestore object

I am trying to execute unit tests for Firestore. Below is the code snippet I am using: import { getDoc, setDoc } from "@firebase/firestore"; import { assertFails, assertSucceeds, initializeTestEnvironment, RulesTestEnvironment, } from &qu ...

javascriptfirebaseunit-testinggoogle-cloud-firestorefirebase-tools

Initiate a $digest cycle externally

How can I ensure that $digest triggers when calling methods from outside Angular in an application where code is loaded and eval'd at runtime? Considering that these methods may also be called from within Angular, would it be better to expose a separa ...

javascriptangularjs

Creating static HTML files for non-static pages using Next.js SSR/ISR

While troubleshooting an issue with a specific page, I noticed that a static HTML file was created for a non-static page using Next.js. Is this expected? The page, which we will refer to as "page1," does not include the functions getStaticPaths() or getSta ...

javascriptreactjsnext.jsincremental-build

Tips for manipulating fixed elements while navigating through the window's content

I am currently working with Materialize CSS (link) and I'm trying to figure out how to move select content while scrolling the page or when the window is scrolling. However, the example code I've implemented doesn't seem to be working. Is th ...

javascriptjqueryhtmlcssmaterialize

Transforming with Babel to create pure vanilla JavaScript

Our current development process involves working with a custom PHP MVC Framework that combines HTML (Views), PHP files, and included JS with script tags (including JQuery, Bootstrap, and some old-fashioned JS libs). During the development stages, we want ...

javascriptphpjquerywebpackbabeljs

Angularjs is struggling to connect data to the user interface

It seems that the array is not binding properly in the UI. In the HTML code, I am using dataTables. The variable $scope.successMessage is also not binding to the UI. I have tried multiple approaches but none seem to be working. Here is a snippet of th ...

javascriptarraysangularjs

Tips for choosing multiple values from a dropdown menu in Bootstrap CSS version 3

I'm looking to implement a way to select multiple values from a dropdown menu without using the CTRL key. Currently, I am utilizing Bootstrap CSS for styling. Here is the code for my dropdown: <select multiple class="dropdown-menu"> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to programmatically prevent the back button from functioning if the previous route pathname in React was 'Login'?

When it comes to navigating back on previous pages, the traditional back button is typically used instead of relying solely on the navigation bar. However, I am currently looking to disable this feature specifically when the next previous route in line is ...

javascriptreactjsreact-router

Unable to apply CSS modifications to child elements in AngularJS

angular.element($document[0].querySelector("table > tbody > tr")).mouseover().css("background-color", "red"); <table> <thead> <tr> <th>Name</th> < ...

javascripthtmlcssangularjs

What is the best way to implement CSS properties on Material UI components?

I've recently started exploring Material UI, but I'm having trouble understanding how the spacing properties function. I'm trying to utilize the "spacing" feature for various elements, but it appears that it only works for "Box" components a ...

javascriptcssreactjsmaterial-ui

JavaScript Reactive: Managing subscriptions in flatMap streams

In my current setup, I have a state$ stream that contains messages$s (an array of message streams). As the State$ is updated, new messages$ are added to the array. My goal is to have a subscriber handle messages from all messages$ in a single stream, ensu ...

javascriptrxjscyclejs

Troubleshooting Issues with Passing Values in jQuery AJAX POST Requests

Currently, I am working on two basic PHP pages: notification.php <html> <head><title></title> <meta charset="UTF-8"> <script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script> <script src="ht ...

javascriptphpjqueryajaxfirebase