Tips for displaying unformatted text using HTML

Is there a way to display a string in HTML with all of its escape sequences preserved?

For example:

eipt No. : 1995,\nmount 935\nAdm. : 17/06/2016

INSTRUCTIONS :

1) This card is valid only for the student's name & for the period indicated.

2) This Card is not transferable and must be produced whenever demanded.

3) In case of loss, the holder must notify the Principal immediately in writing.

4) If anyone finds this card, please return it to the Principal.

When I receive strings like this from an AJAX request, I set the value of a tag using:

$('#ExtractedText').text(response["text"]);

Everything works fine, but the string is not displayed in its raw form. Instead, it looks something like this:

https://i.sstatic.net/Ww7BT.png

How can I ensure that the string is displayed exactly as it was received, with all escape sequences intact?

javascripthtmlcss

Answer №1

Format text using PRE tag

const str = `Receipt No. : 1995,\nmount 935\nAdm. : 17/06/2016\n\nINSTRUCTIONS :\n\n4) This cards is valid only for\nstudent name & for the period\nindicated.\n\n2) This Card is not transferable and\nmust be produced whenever\ndemandes\n\n3) In case of its loss, the holder of\nthis card must intimate to the\nPrincipal immediately in writing.\n\n4) \fanybody finds this card, he/she\nis requested to reach the\nPrincipal.\n\n \n\x0c`
document.querySelector("pre").innerText=str;
<pre></pre>

Utilize String.raw method to avoid - refer to How to escape backslash in JavaScript?

const str = String.raw`Receipt No. : 1995,\nmount 935\nAdm. : 17/06/2016\n\nINSTRUCTIONS :\n\n4) This cards is valid only for\nstudent name & for the period\nindicated.\n\n2) This Card is not transferable and\nmust be produced whenever\ndemandes\n\n3) In case of its loss, the holder of\nthis card must intimate to the\nPrincipal immediately in writing.\n\n4) \fanybody finds this card, he/she\nis requested to reach the\nPrincipal.\n\n \n\x0c`

document.getElementById("div1").innerText = str;
<div id="div1"></div>

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

Removing JSON data with JavaScript

Currently, I am working on developing a custom discord bot for a server that I share with some friends. The bot includes a warn system and level system, and I have successfully implemented JavaScript to write data to an external JSON file. { "othe ...

javascriptjsondiscord.js

Running Python script on Raspberry Pi using Javascript

I have set up a Django Webserver on my Raspberry Pi. I am attempting to run an external python file from a JavaScript document and pass a value from JS to the python script. How can I achieve this task of executing a python file from JavaScript while als ...

javascriptpythondjangoraspberry-piwebserver

Is there a way to update a div element with an image without having to refresh

Currently working on a project for my studies where I am reading the x and y coordinates from a touch pad and drawing it in real time using PHP. I have created a draw page that takes these coordinates and displays them on an image, which is then shown on ...

phpjavascripthtml

"Discover the proper method of referencing an iframe element from an HTML file using JavaScript

I am currently exploring the world of html and CSS, but now I am interested in delving into JavaScript, a topic I am completely unfamiliar with! My goal is to create a random button that displays a randomly selected embedded video (for example, from a poo ...

javascriptjqueryhtmlcssiframe

The simplest way to increase the size of a child element in order to generate a scrollable area

When working with HTML, it's important to consider how the size of a child div affects the parent div. If the child div is larger than its parent, scrollbars will appear on the parent div if the appropriate style rules are set. However, I'm inte ...

javascripthtmlcssresizescroll

Tips for modifying the size and color of a Material UI icon

Utilizing the CircularProgress-Icon component from Material UI, I'm interested in modifying the size and color attributes. Below is the code snippet in question: size color The snippet of code in question appears as follows: const useStyles = makeSt ...

javascriptmaterial-ui

Challenges with the efficiency of the Material UI Datagrid

I am currently using MUI Datagrid to display my records, but I am experiencing delays with my modal and drawer components. Even after attempting to optimize with useMemo for my columns, I have not been able to achieve satisfactory performance. https://i.st ...

javascriptreactjsmaterial-ui

Acquiring the value of an input box in VBA through HTML

Can someone provide guidance on how to retrieve the value from an input box on an Internet Explorer page using VBA? I have tried various solutions but none seem to work. Below is the HTML code I am working with. I specifically need the value of the bolded ...

htmlvbainputbox

Using JavaScript to find the weekday of the same date next year

Struggling to determine the weekday of a particular date next year? Take for example Tuesday, April 19, 2016 as the given date. What we need to calculate is: TUESDAY, April 18, 2017. Consistency with weekdays is crucial in this scenario. The challenge lie ...

javascriptdateleap-year

How to keep a window/tab active without physically staying on that specific tab

Whenever I'm watching a video on a website and switch to another tab, the video stops playing. But when I switch back to the original tab, the video resumes. Is there a trick to prevent the video from stopping? I've already tried using scrollInto ...

javascripthtml

In Node.js using Express, you can set up a validator to require a field only if another specific

Currently, I am utilizing express-validator to validate my post fields. However, I am facing an issue where I need certain fields to be required only if other fields have specific values. For example: If the person_organisation field is true: The person_o ...

javascriptnode.jsvalidationexpress

Unveiling the Magic: Transforming Objects into HTML Attributes using AngularJS

I have been working on developing a highly dynamic ng directive that creates tables based on a given data array and configuration object. I am looking for a way to assign attributes dynamically based on an object within the scope. For example, if I have an ...

javascriptangularjsangularjs-directivehtml

CSS code for targeting specific screen sizes in the Bootstrap grid system

I'm not an expert in styling, but I often use Bootstrap for small projects. Currently, my main challenge lies within the grid system. With one monitor at a 1920x1080 resolution and another at 1366x768, I find myself wanting to adjust the grid system b ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

show a blob within an image element using JavaScript

I have a blob file retrieved from mySql and it looks like the image you see below. https://i.sstatic.net/DkLbh.png Now, I want to display this image using the <img src={imagefile}/> tag in React.js. How can I convert the blob file to a URL link? I ...

javascriptreactjsblob

Displaying an array of objects in the MUI Datagrid interface

I have integrated Redux into my project to retrieve data from the API, and this is a snapshot of the data structure: https://i.stack.imgur.com/jMjUF.png My current challenge lies in finding an effective way to display the information stored within the &a ...

javascriptreactjsmaterial-uidatagridmui-datatable

Limiting page entry with passport.js and express middleware

My server is set up to authenticate user login. I have successfully redirected users to the success page after authentication (and back to the login page if it fails). However, I am facing an issue with using my own express middleware to restrict access fo ...

javascriptnode.jsexpressauthenticationpassport.js

Can Browserify be used with AngularJS to bundle directive templateUrls using relative paths?

Currently, I am developing a web application using AngularJS and Browserify to bundle my JavaScript files into a single package for use on the webpage. My project structure looks something like this: app |-index.html |-index.js |-bundle.js |-components ...

javascriptangularjsbrowserify

Application becomes unresponsive following database write caused by an infinite loop

I have a user_dict object that is generated by fetching data from a Firebase database. Once the user_dict object is created, I store a copy of it within a profile child under the uid. Although the necessary information is successfully saved to the databas ...

javascriptfirebasefirebase-realtime-database

"Aligning content in Bootstrap with vertical centering

I am currently working on aligning a simple piece of code vertically. Check out the code on JS Fiddle: https://jsfiddle.net/3kj44net/ .container-fluid { padding-left: 20px; padding-right: 20px; } <link href="https://maxcdn.bootstrapcdn.com/boots ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Return to the previous page in Next.js after encountering a 404 error, instead of redirecting to a

Recently, I successfully created a 404 page using next.js without any configuration and it displays my custom 404 page flawlessly. However, I encountered an issue where I have a link on this page that redirects the user to another page. When the user is on ...

javascriptreactjsnext.js