Question

我正在使用一个markdown解析器，如果我传递一个像这样的字符串，它会很有效：

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

但是，如果我在HTML中包含该字符串并将其发送到解析器，如

el.innerHTML = marked(otherEl.innerHTML);

它没有被解析。为什么是这样？ .innerHTML的字符串格式是否会执行我遗漏的内容？

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

我的HTML：

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

div.contentTarget应该接收HTML，解析降价。但它只收到一个未解析的字符串。

在图像中，下面是jsFiddle输出。一个未格式化的div.contentTarget，原始div.contentSource，我在div.contentTarget中使用innerHTML，在底部是一个解析后的div#tester，它直接将一个字符串接收到解析器中。

enter image description here

Answer 1

问题出在你的新行上。当你将\n放在javascript中的字符串中时，你会在其中放入一个实际的换行符。

HTML内容中的\n就是\n。不换行符。如果您将HTML更改为此（使用实际换行符），它将按预期工作：

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

Updated fiddle

或者，如果您将javascript字符串更改为：

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

为了使字符串实际包含\n而不是换行符，您会看到相同的错误行为。

Answer 2

您的HTML呈现方式不同，因为Javascript会自动将\n解释为换行符。

请考虑以下事项：

alert('a\ntest');

这将有2行警报。

现在，请考虑以下事项：

<span>a\ntest</span>

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

这将显示a\ntest。

要修复它，请使用：

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

或者，更通用，更安全的方式：

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

或者，如果你最喜欢它并且你已经准备好让cthulhu敲你的前门，请使用它：

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

Answer 3

知道了。

在你的html中，你有\ n，但它应该是一个换行符，你应该使用br因为这应该是html。

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

而不是：

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

调试代码时，如果将innerHTML发送到标记，则会将其显示为函数参数：

#Introduction:\nHere you can write some text.

但是当您在js中发送字符串时，它会显示如下参数：

#Introduction:
Here you can write some text.

希望这有帮助。

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

将字符串从HTML导入markdown解析器

3 个答案: