How to render only parts of a string as HTML

Question

I want to render a text as common HTML and parse occurrences of [code] tags that should be output unrendered - with the tags left untouched.

So input like this gets processed accordingly:

<p>render as HTML here</p>
[code]<p>keep tags visible here</p>[/code]
<p>more unescaped text</p>

I've regexed all code-tags but I have no idea how to properly set the text of the element afterwards. If I use jQuery's text() method nothing gets escaped, if I set it with the html() method everything gets rendered and I gained nothing. Can anybody give me a hint here?

The text gets displayed as is. I seem to have confused escaping with rendering. — beast.caged, Mar 02 '16 at 11:46
Oh so what you actually want to do is parse the data above (which you probably get from somewhere?) and then display it, but you want everything inside the [code] tags to be escaped so that you can see the actual html tags? — Andreas, Mar 02 '16 at 11:53

score 2 · Accepted Answer · edited May 23 '17 at 12:15

2

Try replacing [code] with <xmp> and [/code] with </xmp> using regex or alike, and then use the jQuery html() function.

Note that <xmp> is technically deprecated in HTML5, but it still seems to work in most browsers. For more information see How to display raw html code in PRE or something like it but without escaping it.

edited May 23 '17 at 12:15

Community

1
1

answered Mar 02 '16 at 11:58

Andreas

662
1
6
13

That's it, thank you! Also thanks for the link, gave me some more insight. – beast.caged Mar 02 '16 at 12:07

score 1 · Answer 2 · answered Mar 02 '16 at 12:22

You could replace the [code] and [/code] tags by <pre> and </pre> tags respectively, and then replace the < within the <pre> tags by & lt;
A programmatic solution based on Javascript is as follows

function myfunction(){
  //the string 's' probably would be passed as a parameter

  var s = "<p>render as HTML here</p>\
  [code]<p>keep tags visible here</p>[/code]\
  <p>more unescaped text</p>";

  //keep everything before [code] as it is
  var pre = s.substring(0, s.indexOf('[code]'));

  //replace < within code-tags by &lt;
  pre += s.substring(s.indexOf('[code]'), s.indexOf('[/code]'))
           .replace(new RegExp('<', 'g'),'&lt;');

  //concatenate the remaining text
  pre += s.substring(s.indexOf('[/code]'), s.length);

  pre = pre.replace('[code]', '<pre>');
  pre = pre.replace('[/code]', '</pre>');

  //pre can be set as some element's innerHTML
  return pre;
}

score 1 · Answer 3 · edited May 23 '17 at 10:28

1

I would NOT recommend the accepted answer by Andreas at all, because the <xmp> tag has been deprecated and browser support is totally unreliable.

It's much better to replace the [code] and [/code] tags by <pre> and </pre> tags respectively, as raghav710 suggested.

He's also right about replacing the < character with <, but that's actually not the only character you should replace. In fact, you should replace character that's a special character in HTML with corresponding HTML entities.

Here's how you replace a character with its corresponding HTML entity :

var chr = ['&#', chr.charCodeAt(), ';'].join('');

edited May 23 '17 at 10:28

Community

1
1

answered Mar 02 '16 at 12:49

John Slegers

45,213
22
199
169

In addition to not using ` – Lie Ryan Mar 02 '16 at 13:13

Lie Ryan · Answer 4 · 2016-03-02T13:04:43.187

You can replace the [code]...[/code] with a placeholder element. And then $.parseHTML() the string with the placeholders. Then you can insert the code into the placeholder using .text(). The entire thing can then be inserted to the document (run below or in JSFiddle).

var str = "<div><b>parsed</b>[code]<b>not parsed</b>[/code]</div>";
var placeholder = "<div id='code-placeholder-1' style='background-color: gray'></div>";
var codepat = /\[code\](.*)\[\/code\]/;
var code = codepat.exec(str)[1];
var s = str.replace(codepat, placeholder);
s = $.parseHTML(s);
$(s).find("#code-placeholder-1").text(code);
$("#blah").html(s);

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

Text
<div id="blah">place holder</div>
Around

The code above will need some modifications if you have multiple [code] blocks, you will need to generate a unique placeholder id for each code block.

If you may be inserting untrusted structure code, would highly recommend using large random number for the placeholder id to prevent a malicious user from hijacking the placeholder id.

How to render only parts of a string as HTML

4 Answers4