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

The Magic of Jasmine's toMatch Method and the Power of Parentheses

Have you observed that when using Jasmine Expect with toMatch, it fails if the string being matched contains a (? If so, what steps did you take to address this issue? For example: This statement fails or returns "False" instead of "True": expect("test ...

regexangularjsunit-testingjasmineprotractor

Using localStorage in Next.js, Redux, and TypeScript may lead to errors as it is not defined

Currently, I am encountering an issue in my project where I am receiving a ReferenceError: localStorage is not defined. The technologies I am using for this project are Nextjs, Redux, and Typescript. https://i.stack.imgur.com/6l3vs.png I have declared ...

javascriptreactjsreact-reduxnext.jsreact-typescript

Utilizing Express.js for reverse proxying a variety of web applications and their associated assets

I am looking to enable an authenticated client in Express to access other web applications running on the server but on different ports. For instance, I have express running on http://myDomain and another application running on port 9000. My goal is to re ...

javascriptnode.jsexpressproxynode-http-proxy

AngularJS view does not wait for the completion of $http.get request

Within my controller, the code snippet below is present... $scope.products = dataService.getJsonData(); console.log($scope.products); The corresponding code in my dataservice is as follows: .service('dataService', function ($http) { t ...

javascriptangularjs

ngMaterial flex layout not functioning properly

I can't seem to figure out why ngMaterial is not laying out my simple hello world app in a row. Despite checking the console for errors, I still can't see what I am doing wrong. I expected the content below to be displayed horizontally instead of ...

javascriptangularjsflexbox

How can one easily retrieve the callback function arguments from outside the function?

Here is a snippet of my code: var jenkins = require('jenkins')('http://192.168.1.5:8080'); var job_name = undefined; jenkins.job.list(function doneGetting(err, list) { if (err) throw err; job_name = list[0].name; }); jenkins. ...

javascriptnode.jsexpressnpm

Avoid the ability for individuals to interact with the icon embedded within a button

I'm currently working on a website where users need to interact with a button to delete an "Infraction." The button has a basic bootstrap style and includes an icon for the delete action. <button referencedInfraction="<%= i.infractionID %>" ...

javascripthtmljquerytwitter-bootstrap

What is the fastest way to invoke the driver.quit() method in Selenium?

Is there a way to force close the browser immediately instead of waiting for it to complete loading before calling driver.quit()? ...

javascriptnode.jsseleniumselenium-webdriverpageloadstrategy

Rearrange the layout by dragging and dropping images to switch their places

I've been working on implementing a photo uploader that requires the order of photos to be maintained. In order to achieve this, I have attempted to incorporate a drag and drop feature to swap their positions. However, I am encountering an issue where ...

javascriptangulartypescriptdrag-and-dropangular-cdk

Is it not possible to generate HTML tags using jQuery and JavaScript in JSF?

I'm currently working with jsf 2.0 and richfaces 4.0 to develop my application. Occasionally, I incorporate jQuery and JavaScript functions for displaying and hiding elements. However, I've encountered an issue when trying to generate tags within ...

javascriptjqueryjsfxhtmlrichfaces

Handling scroll events in a functional component using React

I'm having trouble understanding why the onScroll function isn't triggering the console.log statement. <table className="table" onScroll={()=>{console.log("Works")}> The console.log just doesn't seem to be exec ...

javascriptreactjsonscroll

How can I show the total sum of input values in a React.js input box?

Is there a way to dynamically display the sum of values entered in front of my label that updates automatically? For example, you can refer to the image linked below for the desired output Output Image I have initialized the state but I'm struggling ...

javascriptreactjs

Having trouble with understanding the usage of "this" in nodejs/js when using it after a callback function within setTimeout

It's quite peculiar. Here is the code snippet that I am having trouble with: var client = { init: function () { this.connect(); return this; }, connect: function () { var clientObj = this; this.socket = ...

javascriptnode.js

Changing the display of elements using Javascript in IE6 by modifying class

Currently, I am facing an issue at work that involves a piece of code. The code functions correctly in Firefox 3.6 where clicking on a row changes its class name and should also change the properties of the child elements. However, in IE6 and possibly othe ...

javascriptcssinternet-explorer-7internet-explorer-6

"Retrieve the position of a contenteditable element while also considering HTML

I've been exploring a method to generate annotations within HTML text using JavaScript. The approach involves the user clicking on a contenteditable <div> and obtaining the cursor's position based on their click. Subsequently, when insertin ...

javascripthtml

"Slow loading times experienced with Nextjs Image component when integrated with a map

Why do the images load slowly on localhost when using map, but quickly when not using it? I've tried various props with the Image component, but none seem to solve this issue. However, if I refresh the page after all images have rendered once, they ...

javascriptreactjstypescriptoptimizationnext.js

The updates made to a variable within an ajax request are not immediately reflected after the request has been completed

My global variable is not displaying the expected result: function checkLiveRdv(salle, jour, dateus, heure) { var resu; var urlaction = myUrl; $.ajax({ type: "POST", dataType: "json", url: urlaction, data: myDatas, suc ...

javascriptajaxvariablesjquery

HTML Date Form: Setting the Start Date to Tomorrow with JavaScript

Is there a way to restrict the start date to tomorrow's local date? I'm having trouble with the code below: <form method="POST"> <div> <label for="s2">pickup_date</label> ...

javascripthtmlformsdatelocaltime

Discovering the method to extract a Specific Form Field value with JQuery

Recently, I encountered a form that looked like this: <form id="post_comment" action="cmt.php" method="post"> <input type="hidden" name="type" value="sub" /> <textarea id="body"></textarea> </form> To interact with the ...

javascriptjquery

Encountering RangeError with the Number() function on my express.js server

I'm working with an HTML form that looks like this: <form class="" action="/" method="post"> <input type="text" name="num1" placeholder="First Number"> <input type= ...

javascriptnode.jsexpressnode-modules