Hướng dẫn html to string javascript

I was working with a rich text editor the other day and needed to strip the HTML tags from the string and store it in the database. In doing so, I learned a few different methods to achieve this. I wanted to share this information with you as it could come in handy for anyone who is trying to do the same.

Nội dung chính

• 1. Using .replace[/]*>/g, ‘’]
• 2. Create a temporary DOM element and retrieve the text
• 3. html-to-text npm package
• 1] Using .replace[/]*>/g, ‘’]
• 2] Create a temporary DOM element and retrieve the text
• 3] html-to-text npm package
• How do I turn a HTML element into a string?
• How do I convert HTML content to plain text?
• How do you convert something to a string in JavaScript?
• Can you convert HTML to JavaScript?

What we are trying to do is remove the tags from the string and make the string printable as plain text. Let’s dive in and see how it works.

1. Using .replace[/]*>/g, ‘’]

This method is a simple and efficient way to remove the tags from the text. This method uses the string method .replace[old value, new value] which replaces the HTML tag values with the empty string. The /g is used for it to happen globally [every value found in the string is replaced with the specified if the /g is used].

The drawback of this method is that we can’t remove some HTML entities. It still works well though.

2. Create a temporary DOM element and retrieve the text

This is the most efficient way of doing the task. Create a dummy element and assign it to a variable. We can extract later using the element objects. Assign the HTML text to the innerHTML of the dummy element and we will get the plain text from the text element objects.

3. html-to-text npm package

This is the package I discovered recently. This is the converter that parses HTML and returns beautiful text. It comes with many options to convert it to plain text like wordwrap, tags, whitespaceCharacters , formattersetc.

Package.json is needed to use the package. We need to install the package first and then use it in our file.

You can find the official docs for the package here. I used it in my vue project and it worked very well.

Installation:

npm install html-to-text

Usage:

Conclusion

And that sums it up! You can find an example of the project here.

Thank you!

var myHTML= "
Jimbo.
\n
That's what she said";

var strippedHtml = myHTML.replace[/]+>/g, ''];

// Jimbo.
// That's what she said
console.log[stripedHtml];

function convertToPlain[html]{

    // Create a new div element
    var tempDivElement = document.createElement["div"];

    // Set the HTML content with the given value
    tempDivElement.innerHTML = html;

    // Retrieve the text property of the element 
    return tempDivElement.textContent || tempDivElement.innerText || "";
}

var htmlString= "
Bears Beets Battlestar Galactica 
\n
Quote by Dwight Schrute";


console.log[convertToPlain[htmlString]];
// Expected Result:
// Bears Beets Battlestar Galactica 
// Quote by Dwight Schrute

npm install html-to-text

const { htmlToText } = require['html-to-text'];

const text = htmlToText['
Nope Its not Ashton Kutcher. It is Kevin Malone. 
Equally Smart and equally handsome', {
    wordwrap: 130
}];
console.log[text]; // expected result: 
// Nope Its not Ashton Kutcher. It is Kevin Malone.

// Equally Smart and equally handsome

How do I turn a HTML element into a string?

To convert a HTMLElement to a string with JavaScript, we can use the outerHTML property. const element = document. getElementById["new-element-1"]; const elementHtml = element.

How do I convert HTML content to plain text?

This is the most efficient way of doing the task. Create a dummy element and assign it to a variable. We can extract later using the element objects. Assign the HTML text to innerHTML of the dummy element and we will get the plain text from the text element objects.

How do you convert something to a string in JavaScript?

JavaScript Number to String – How to Use toString to Convert an Int into a String.

var num = 24; var str = num. toString[]; console. ... .

toString[]; // Error: Invalid or unexpected token [24]. toString[]; // "24" [9.7]. ... .

var str = [5]. toString[2]; console. ... .

var arr = [ "Nathan", "Jack" ]; var str = arr. toString[]; console..

Can you convert HTML to JavaScript?

Insert your HTML text into the text box by typing it or cut and paste. Then to convert it to JavaScript that is usable in an HTML document, click the 'Convert HTML -> JavaScript' button; the converted code will appear in the same box. The 'Clear Text' button will erase everything in the text box.