How to encode only part of this string and render html

Question

I have a string myString="<pre class='ql-syntax'><code><html><body>Will this work?</body></html></code></pre>" which needs to be rendered in a webpage such that the content inside the <code> block is encoded so it shows up as is.

$('<div/>').html(htmlString).html() removes the html and body tags and outputs the following:

<pre class="ql-syntax"><code>Will this work?</code></pre>

What I want the output to be is:

<pre class="ql-syntax"><code><html>hello</html></code></pre>

so on the webpage, the entire content which is inside the code block renders.

How do I encode only the part of the myString which is between the <code> block?

I am fetching the myString from the database, so I don't have any control over how I construct the myString. I can manipulate it however I want to make sure the html inside the code block renders as is.

I'm seeing that <code>Will this work?</code> is left. You want the output to be <code><html><body>Will this work?</bod></html></code>? — Garrett Kadillak
– Garrett Kadillak, Commented Apr 23, 2017 at 21:00
are you looking for something like this-codepen.io/nagasai/pen/mmEZQG?editors=1111 — Naga Sai A
– Naga Sai A, Commented Apr 23, 2017 at 21:01
check here:stackoverflow.com/questions/2820453/display-html-code-in-html — scraaappy
– scraaappy, Commented Apr 23, 2017 at 21:02
@NagaSaiA Updated the question with exact output I am looking for — maheshmurthy
– maheshmurthy, Commented Apr 23, 2017 at 22:32

norekhov · Accepted Answer · 2017-04-23 22:47:51Z

2

I suggest you want only

 <code><html><body>Will this work?</body></html></code>

to be put to a pre. It's better you make a pre placeholder. Than just find it and set innerHtml. For example something like this:

<pre class="ql-syntax" id="code"></pre>

var pre = document.getElementById("code");
var codeLength = '<code>'.length;
var start = htmlString.indexOf('<code>');
var stop = htmlString.indexOf('</code>');
if (start != -1 && stop != -1 && stop > start)
    pre.innerHtml = htmlString.substring(start+codeLength, stop-start-codeLength);

edited Apr 23, 2017 at 22:47

answered Apr 23, 2017 at 21:00

norekhov

4,3981 gold badge32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sandy Gettings Over a year ago

<pre> is no longer supported in HTML5.

norekhov Over a year ago

And than what? It stops working? Of course it's supported. Look here for example developer.mozilla.org/en-US/docs/Web/HTML/Element/pre

guest271314 Over a year ago

@SandyGettings "<pre> is no longer supported in HTML5" Can you share link to documentation?

Sandy Gettings Over a year ago

My mistake. I read the documentation too quickly, only the width attribute of pre is not supported in HTML5. :(

maheshmurthy Over a year ago

@norekhov I updated my question to be more clear. I can't control how that string is built. How do I parse that string and encode only the part which is between code tag?

guest271314 · Accepted Answer · 2017-04-24 01:27:53Z

You can use String.prototype.match() with RegExp /(<pre?\s.+?>)|(<code>)|[^\1].+(?=<\/code>)/g to match "<pre" followed by space character followed by one or more characters followed by ">" or "<code>" or not previous capture group "<code>" followed by one or more characters followed by "</code>".

Create <div> element and append to document.body, call .shift() on array returned by .match() to get "<pre>", set div .innerHTML to result of .shift(); call .shift() to get "<code>" match, set as .innerHTML of div.firstChild : <pre>, call .shift(), set result as .textContent of div.firstChild.firstChild : <code>.

var str = `<pre class="ql-syntax"><code><html><body>Will this work?</body></html></code></pre>`;
var matches = str.match(/(<pre?\s.+?>)|(<code>)|[^\1].+(?=<\/code>)/g);
var div = document.createElement("div");
document.body.appendChild(div);
var pre = matches.shift();
div.innerHTML = pre;
var code = matches.shift();
div.firstChild.innerHTML = code;
var html = matches.shift();
div.firstChild.firstChild.textContent = html;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

Community · Accepted Answer · 2017-05-23 12:34:08Z

0

If I understand your question, you need to HTML-encode the string within and including the <code> tags. See HTML-encoding lost when attribute read from input field

I'm not sure how you're constructing the string in the first place, but the code in the linked post should get you started. Perhaps something like this:

var newstring = "<pre class="ql-syntax">" + htmlEncode("<code><html><body>Will this work?</body></html></code>") + "</pre>";

Does this help?

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Apr 23, 2017 at 21:28

Sandy Gettings

7137 silver badges23 bronze badges

2 Comments

maheshmurthy Over a year ago

Yeah, pretty much. But how do I parse and split the string to extract everything between code block and call htmlEncode on just that part?

Sandy Gettings Over a year ago

Well, given an arbitrary string, there are any number of ways to split it into parts, depending on the language and techniques you prefer. For example, regular expressions are elegant but may be difficult to learn. Or in C#, for example, you can find the position of the "<code>" and "</code>" tags with string.IndexOf() method. In any case, you'll probably want to parse the original string into its three substrings, and then concatenate them back together with the middle substring HTML-encoded. If you don't already know how to use these techniques, it would be a great learning exercise.

Collectives™ on Stack Overflow

How to encode only part of this string and render html

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related