Convert HTML Rich Text to Plain Text using a TextArea component

Currently, I am facing an issue while attempting to display rich-content text from the server in a grid format without any HTML styling tags. Despite my efforts, I have been unable to successfully remove these tags by simply writing and reading the data from a hidden textarea element as shown below:

<textarea name="textarea" id="temp_desc" rows="10" cols="50" style="visibility: hidden"></textarea>

Upon further inspection, it seems that the HTML tags themselves are not being stripped away, leaving me stuck in this predicament. I would appreciate any suggestions or alternative methods to achieve the desired outcome without resorting to complex JavaScript or jQuery solutions.

Your assistance is greatly appreciated. Thank you.

javascriptjqueryhtmlcss

Answer №1

To find the solution to this issue, I made use of DIV in place of textarea along with the JQuery method .text().

HTML:

<div id="temporary_description" style="display: none"></div>

JS:

$("#temporary_description").html(Description);
var tempDescDiv = document.getElementById("temporary_description");
var temporary_desc = $(tempDescDiv).text();

Upon running the above JS code, the variable temporary_desc now holds plain-text content.

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

Transforming a string in AngularJS to a "controller as" approach using $parse

How can I modify foo.callbacke to reference the timerController.callbacke method? <div ng-app="timerApp" ng-controller="timerController as foo"> <div ng-repeat="item in [1,2,3,4]"> <div watcher="{'seconds': 'foo.callbacke ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat

Unable to fix position: sticky issue following Angular 15 update

Following the angular material update to version 15, many of us experienced issues with CSS changes breaking. This also affected legacy code that included sticky headers. <div class="row"> <div class="col-12"> <di ...

htmlcssangularangular-material

Is it possible to use font-face in CSS3 to switch fonts for different languages?

Can I replace an Arabic font with a custom one using font-face in CSS3? I've successfully done it with English but I'm not sure if it's the same for foreign languages, so I wanted to check. Also, I feel silly asking this question, but I&apos ...

htmlcssfont-face

Can an enterprise level web application be effectively built using [HTML5 + jQuery] (without ASP.NET) + WCF?

We have been utilizing ASP.NET web forms for a long time to get some perspective. While we understand the advantages of MVC over web forms, there's now a suggestion on the table to skip all abstraction layers and move directly from a pure .HTML page ...

jqueryasp.net-mvcwcfhtmlwebforms

Taking a Breather with mywindow.print()

I'm currently utilizing a fantastic printing script that I found: <script type="text/javascript"> function PrintElem(elem) { Popup($(elem).text()); } function Popup(data) { var mywindow = window.ope ...

javascript

Issue with Three.js bounding box when importing a Blender JSON model

I am encountering some challenges when it comes to manipulating the objects imported from Blender. It seems like the pivot point is always set at 0,0,0 instead of the current position of the object. Despite correctly positioning and importing the objects i ...

javascriptthree.js

Tips for removing two specific "th" elements from a table that is generated dynamically

I have a challenge where I need to remove 2 specific elements from a table depending on which delete button is clicked Check out the code snippet below : <!--HTML--> <button type="button" class="collapsible">Manage Formulas</button> < ...

javascriptjqueryhtmlcsshtml-table

Bring in SASS variables to enhance Material UI theme in NextJS

Within my project, I currently have the following two files: materialTheme.ts import { createMuiTheme, Theme } from "@material-ui/core/styles"; const theme: Theme = createMuiTheme({ palette: { primary: { main: "#209dd2", contras ...

javascriptreactjssassmaterial-uinext.js

Is it possible to adjust the size of a p5.js canvas within a bootstrap Div container?

I am attempting to incorporate a p5js canvas into a bootstrap grid structure. My goal is to have each div within the grid contain its own unique p5js canvas, which should adjust in size when the browser is resized. Below is my bootstrap grid setup, showca ...

javascripthtmljquerycanvasp5.js

Is it possible to end a session in PHP that was set using jQuery?

How do I end a session in PHP that was set by jQuery? The code to initiate the session is: $('#psubmit').click(function() { $.post("single-us_portfolio.php", {"myusername": "myusername"}); }); To retrieve the session on custom.php, ...

phpjquerysession

Bring in a sole getServerSideProps function to various pages in Nextjs

Is there a way to import the getServerSideProps method from this page to another and apply it across multiple pages? Here is the code snippet I am referring to: import DashboardLayout from "@app/layout/DashboardLayout"; import Overview from &quo ...

javascriptreactjsecmascript-6next.jses6-modules

problem with angular.isNumber

Could someone please explain why I am encountering an issue with angular.isNumber(Number("1s")) The output I am receiving is : var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.x1 = "1s"; ...

htmlangularjs

"Uh-oh! Encountered a new unexpected runtime error. Can't seem

While working on my portfolio in Next.js, I encountered an issue. I added a header to display on all pages by placing it in _app.js without making any changes to _document.js. Here is the error message: Unhandled Runtime Error Error: No router instance fo ...

javascriptreactjsnext.js

Encountering a 404 error when attempting to post from a Node.js express app to a

Trying to post to a MySQL database has been giving me a 404 error. I have searched through various posts here, but none of the accepted solutions seem to work for me. I'm struggling to figure out what I am doing wrong. When utilizing a GET request, t ...

javascriptmysqlnode.jsexpress

Access and retrieve images directly from the output of an s3 bucket query

I've manually uploaded an image named userImage.png, but I'm unsure how to convert the incoming body of the result into an image. While I found some examples in this question[ how to retrieve image from s3 with nodejs ], I'm not sure how to ...

javascriptnode.jsamazon-web-servicesamazon-s3next.js

Nuxt: Encountered an unexpected < symbol

https://i.sstatic.net/MbM9f.png I've been working on a nuxt project where I'm currently in the process of creating a map component using Google Maps with the help of the plugin https://www.npmjs.com/package/vue2-google-maps. After installing the ...

javascriptvue.jsnuxt.js

Validation of PO Box Addresses Using Regular Expressions

I'm having trouble getting the alert to work with my code. $(document).ready( function (){ $("[id*='txtAddress1S']").blur(function() { var pattern = new RegExp('\b[P|p]*(OST|ost)*\.*\s*[O|o|0]*(ffice|FFICE)*& ...

javascriptjqueryregex

Utilizing Python for extracting text from dynamically generated web pages with JavaScript

Is there a way to write a script in Linux that can extract text from a page generated by Javascript, specifically using etherpad (for example, http://www.board.net)? I have not been able to find an existing tool that fits my needs, such as lynx which doesn ...

javascriptpythonlinuxselenium

jQuery is unable to locate the FireBreath object

Currently, I am in the process of developing a web video player by using Firebreath to compile my C/C++ codec as a browser plugin. The plugin has been successfully loaded and is functioning properly (start, stop video, etc.). My next goal is to enable full ...

javascriptjqueryhtmlcssfirebreath

Why is my Express Router being called twice?

When I call server.js, it in turn calls index.js via a route. The issue I am facing is that the router in index.js is being called twice when the page is accessed, resulting in the message "/ (Console.log inside router.use(async (req, res, next) => { fr ...

javascriptnode.jsexpressroutes