Using backslashes to escape a JavaScript array elements

How can I modify the code below to properly escape HTML and strings in JavaScript arrays? I've been attempting to use a function called escapeHtml to add the necessary slashes, but it's not functioning as expected. Any help would be appreciated. Thanks!

<!DOCTYPE html>
<html>
<body>


<p id="demo"></p>

<script>
function escapeHtml(unsafe)
{
    return unsafe
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }
var unsafe = ["car's", "<h1>hello</h1>", "Ref#1", "a-b", "he said "hello" to him"];
document.getElementById("demo").innerHTML = escapeHtml(unsafe);
</script>

</body>
</html>

Answer №1

To ensure proper HTML rendering, the escapeHtml function must be called for every element within an array:

document.getElementById("example").innerHTML = items.map(item => escapeHtml(item));

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

Divergence in results: discrepancy found in the outputs of nodejs crypto module and tweetnacl.js

Consider this code snippet in nodejs: import crypto from 'crypto'; const pkey = `-----BEGIN PRIVATE KEY----- MC4CAQAwBQYDK2VwBCIEIJC52rh4PVHgA/4p20mFhiaQ/iKtmr/XJWMtqAmdTaFw -----END PRIVATE KEY-----`; // placeholder key function sign_message(m ...

What is the functionality of array equals useState declarations in JavaScript?

Within ReactJS functional components, the following line enables the creation of: A variable to keep track of the current count A method to update the state when invoked Here's an example in JavaScript: let [count, setCount] = useState([]); Can you ...

Are you feeling lost when it comes to Javascript? How is it possible for a boolean function to function as a

Preparing for an upcoming interview, I'm diving back into the world of JavaScript. Recently, I came across an interesting blog post that mentioned: "The delete operator returns true if the delete was successful." The blog then provided an example ...

While it is possible to filter by friend.brand.id within friends in Angular, unfortunately the || undefined trick cannot be used to reset the filter when it is NULL

In the futuristic world of 2075, immortal humans have subjugated mortal humans. There exists a unique store where mortal friends are sold, and efforts are being made to develop an app that allows customers to manage their friends based on their favorite br ...

What is the best way to design a dynamic menu using HTML, CSS, and jQuery, where each li element gradually disappears?

Consider this menu structure: <ul class="main-menu"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> My task is to dynamically hide th ...

The RxDB Angular2-cli error message. "Cannot assign a 'Promise<void>' to a 'Promise<any>' parameter."

https://i.sstatic.net/50vu6.png I've been grappling with getting RxDB to function properly in a fresh project I initiated using the Angular CLI. Here's my process: ng new <Projectname> After that, I installed RxDB by running: npm instal ...

Modify x and y axes in highcharts for stacked columns

Can anyone assist me in finding charts similar to the one shown below? I am interested in utilizing the stacked column charts provided by the highcharts library. However, I need to modify the presentation of the data values as demonstrated in the image. I ...

Tips for deactivating all JavaScript events on a webpage that has been loaded within an iframe

My website is equipped with various JS click/mouseover/mouseout/scroll events and incorporates several JS libraries to operate features such as carousels, bootstrap modal pop-ups, and more. I am looking to halt all events on a specific element. Although I ...

The datatable does not adjust to changes in page size

My jsfiddle example showcases different card boxes, and I am currently focusing on making the 'Table 1' box responsive. However, I have encountered an issue: Check out my jsfiddle example here code If you open the jsfiddle with a large enough ...

Accessing dropdown selection in Javascript-Json: A Comprehensive Guide

My dropdown list is being populated dynamically using json. The selected option from the first dropdown determines the options in a secondary dropdown. I need to use the selection from the second dropdown to automatically fill out two more fields. For exa ...

What is the method for obtaining the size of a mesh object in pixels (instead of Vector3) within BabylonJS?

Exploring Babylon.js How can I retrieve the size of a mesh object in pixels instead of Vector3 in a React application using Babylonjs? This is what I attempted: let meshPixelSize = meshObject.getBoundingInfo().boundingBox; ...

Stop the Form from Submitting When Errors are Present

In the midst of explaining my issue, I must first share details about a form I'm developing. It's a Registration form where upon submission by clicking Submit, users won't immediately reach a Successfully Registered page. Instead, they' ...

Find the differences between two String[] arrays and display the distinct strings

I have a folder with a list of file names and another list of files that have been manually checked by a developer. How can I compare these two arrays to only print out the files that are not in the master list. public static void main(String[] args) th ...

Navigate a JSON object using JavaScript

As I continue to juggle learning code with my job, I am diving into the world of creating charts using AMcharts. My goal is to generate multiple data sets based on orientation and potentially expand further in the future. In the JSON snippet below, you can ...

I am attempting to arrange variables based on the key of the json nested within another json

It's a bit challenging to condense my goal into one question, but I'll try my best to clarify. I currently have a JSON array that represents various HTML slider elements categorized within 3 control panes: Basic, Interface, and Advanced. Each pa ...

All API endpoints must be accessed with a jwt token

After diving into the nextjs documentation, I stumbled upon something interesting. import { getToken } from "next-auth/jwt" const secret = process.env.NEXTAUTH_SECRET export default async function handler(req, res) { // if using `NEXTAUTH_SEC ...

I am attempting to retrieve JSON data in JavaScript but am seeing a null response in the action class

Having an issue with JSON data being sent through AJAX from the client side. The data is showing as null inside my action class. Here is the JSON string: {"data":[{"id":"","col":1,"row":1,"size_x":1,"size_y":1}, {"id":"","col":1,"row":2,"size_x" ...

Manipulating the DOM with Javascript and jQuery: Adding a new element and retrieving its reference

I am encountering an issue with a Web App that relies on JavaScript and jQuery. Essentially, the website includes a button that triggers a JavaScript function when clicked. Within this function, there are two other functions named Foo and Bar. Foo generate ...

Can PHP arrays be accessed inline?

When working in PHP, I often encounter the following construct: $a = array(-1 => '-', 0 => '?', 1 => '+')[1]; This line of code results in a syntax error. Is there a way to achieve similar functionality in one strea ...

Exploring the concept of ng-model with undefined values in AngularJS

Having an input with a $watch function that updates a search query in real time through AngularJS, I am encountering an issue. Despite setting the initial value of the model to empty, it automatically triggers the search and displays results. My concern i ...