Importing string from HTML into markdown parser

Question

I am using a markdown parser that works great if I pass it a string like this:

el.innerHTML = marked('#Introduction:\nHere you can write some text.');

But if I have that string inside HTML and send it to parser like

el.innerHTML = marked(otherEl.innerHTML);

it does not get parsed. Why is this? Does the string format of .innerHTML do something I am missing?

jsFiddle: http://jsfiddle.net/5p8be1b4/

My HTML:

<div id="editor">
    <div class="contentTarget"></div>
    <div class="contentSource">#Introduction:\nHere you can write some text.</div>
</div>

div.contentTarget should receive HTML, parsed markdown. But it receives a un-parsed string only.

In the image bellow is the jsFiddle output. A unformated div.contentTarget, the original div.contentSource where I get the innerHTML to use in div.contentTarget and in the bottom, a working parsed div#tester which received a string directly into the parser.

enter image description here

@IsmaelMiguel it comes in the dependencies of jsFiddle, and you can see it working in the example there also. — Rikard
– Rikard, Commented Jun 18, 2015 at 10:15
Sorry. But I don't see any mistake. And I didn't noticed the dependency. It is working as expected. — Ismael Miguel
– Ismael Miguel, Commented Jun 18, 2015 at 10:19
@IsmaelMiguel the output in div.contentTarget is wrong, its not parsed HTML, its still markdown. That is the problem. — Rikard
– Rikard, Commented Jun 18, 2015 at 10:20
It renders an <h1>, which is fine. Or you expect it to also render \n as a <br>? — Ismael Miguel
– Ismael Miguel, Commented Jun 18, 2015 at 10:43

James Thorpe · Accepted Answer · 2015-06-18 10:57:17Z

1

The issue is around your newlines. When you put \n inside a string in javascript, you're putting an actual newline character in it.

The same \n inside your HTML content is just that, \n. It is not a newline. If you change your HTML to this (with an actual newline), it works as expected:

<div class="contentSource">#Introduction:
Here you can write some text.</div>

Updated fiddle

Alternatively, if you change your javascript string to:

test.innerHTML = marked('#Introduction:\\nHere you can write some text.');

So that the string actually contains \n rather than a newline, you see the same erroneous behaviour.

answered Jun 18, 2015 at 10:57

James Thorpe

32.3k6 gold badges76 silver badges95 bronze badges

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

Comments

Emre Türkiş · Accepted Answer · 2015-06-18 10:57:36Z

1

Got it.

In your html, you have \n, but it's supposed to be a line-break, and you should use br becasue this is supposed to be html.

<div class="contentSource">#Introduction:<br/>Here you can write some text.</div>

instead of:

<div class="contentSource">#Introduction:\nHere you can write some text.</div>

When you debug the code, if you send the innerHTML to marked, it shows this as a function parameter:

#Introduction:\nHere you can write some text.

But when you send the string in the js, it shows the parameter like this:

#Introduction:
Here you can write some text.

Hope this helps.

JsFiddle: http://jsfiddle.net/gbrkj901/11/

answered Jun 18, 2015 at 10:57

Emre Türkiş

1,00210 silver badges23 bronze badges

1 Comment

Emre Türkiş Over a year ago

to further the issue: bennadel.com/blog/…

Ismael Miguel · Accepted Answer · 2015-06-18 11:10:40Z

1

Your HTML is rendering differently because Javascript automatically interprets \n as a newline.

Consider the following:

alert('a\ntest');

Which will have an alert with 2 lines.

And now, consider the following:

<span>a\ntest</span>

<script>
    alert(document.getElementsByTagName('span')[0].innerHTML);
</script>

This will show a\ntest.

To fix it, use this:

el.innerHTML = marked(otherEl.innerHTML.replace(/\\n/g,'\n'));

Or, a more general and secure way:

el.innerHTML = marked(
    otherEl
        .innerHTML
        .replace(
            /\\([btnvfr"'\\])/g,
            function(_,c){
                return {
                        b:'\b',
                        t:'\t',
                        v:'\v',
                        n:'\n',
                        r:'\r',
                        '"':'"',
                        "'":"'",
                        '\\':'\\'
                    }[c];
            }
        )
    );

Or, if you like it minimal and you are ready to have cthulhu knocking on your front door, use this:

el.innerHTML = marked(otherEl.innerHTML.replace(/\\([btnvfr])/g,function(_,c){return eval('return "\\'+c+'"');}));

edited Jun 18, 2015 at 11:10

answered Jun 18, 2015 at 10:57

Ismael Miguel

4,2691 gold badge35 silver badges44 bronze badges

1 Comment

Ismael Miguel Over a year ago

@JamesThorpe It would evaluate the escape sequence. But it isn't a secure way.

Collectives™ on Stack Overflow

Importing string from HTML into markdown parser

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related