Javascript return text to html

How to convert a string to HTML in JavaScript

While working with web pages, we often need to convert a string to HTML markup. In this article, you’re going to learn how to convert a piece of text or string to an actual HTML element with JavaScript with examples.

Now, how can we convert this? We’re going to use the DOMParser web API to solve the problem.

What is DOMParser :

The DOMParser interface has the ability to transform XML or HTML source code from a string into a DOM Document. It is a tree-based architecture. Let’s use that.

let ConvertStringToHTML = function (str) < let parser = new DOMParser(); let doc = parser.parseFromString(str, 'text/html'); return doc.body; >;

In this code, we have created a function expression and defined a function inside of it. The function simply takes a parameter, so that we can pass our declared string which is ‘ourString’. Then we have created an instance of the DOMParser interface and from the object, we called the built-in method parseFromString() .

What is parseFromString():

The parseFromString() method of the DOMParser interface converts a string which contains HTML and returns as an HTMLDocument.

The parseFromString() the method takes two parameters. The first one is the string we pass and the second one is the type. In our case, we want to convert to an HTML document, so our type is ‘text/html’. Now, if pass our declared string and log this to our console-

console.log(ConvertStringToHTML(ourString));

You can see that the HTML string is converted to an HTML element as a DOM node. Now, you can use the methods of DOM nodes like appendChild() to use the result. The DOMParser also can convert a string to an XML document. We just have to use a different type like ‘text/xml’. So, in this article, you learned how to convert a string to HTML with Javascript. I hope this example will help you. Thank you.

Related Posts

Источник

Convert Text to HTML using Javascript

In one of our previous post, I have explained how to convert word document into HTML using Javascript, in this article,we will be using Javascript to convert plain text into HTML element.

String to HTML using Javascript

You can simply convert html string into HTML data for user, by providing contents to div.innerHTML in Javascript but it is better to use DOMParser for better output.

So, we can convert string into HTML using these simple steps:

1. Grab plain text
2. Check if browser support DOMParser, if yes, convert text into HTML else use fallback
3. Append Converted HTML into Body.

Here is the Complete Javascript code to do this:

var support = (function () < if (!window.DOMParser) return false; var parser = new DOMParser(); try < parser.parseFromString('x', 'text/html'); >catch(err) < return false; >return true; >)(); var textToHTML= function (str) < // check for DOMParser support if (support) < var parser = new DOMParser(); var doc = parser.parseFromString(str, 'text/html'); return doc.body.innerHTML; >// Otherwise, create div and append HTML var dom = document.createElement('div'); dom.innerHTML = str; return dom; >; document.getElementById("divMain").innerHTML= textToHTML('
Hello
Your HTML Contents are visible now
');

Here is the working fiddle

Convert Plain text into HTML Using jQuery

When using jQuery, you can directly using it’s inbuilt function .html() , here is the custom function

Here is the complete sample HTML

$.fn.toHtml=function() < return $(this).html($(this).text()) >$('.go').click(function()< $('#div').toHtml() >); 

Источник

How to Convert a String to HTML using JavaScript

JavaScript has many built-in APIs and methods that give you control over the HTML on the page.

One of the most useful ways to control the HTML is by converting a string to HTML.

From there, you can use the HTML to append to the DOM, or use it to replace the current page.

In this post, we’ll learn how to convert a string to HTML using JavaScript.

How to convert a String to HTML using JavaScript

To learn how to convert a string to HTML, first let’s define the string of HTML:

 
Convert a String to HTML
 
Learn how to convert a string to HTML using JavaScript.