將字符串從HTML導入markdown解析器

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，解析markdown。 但它只接收未解析的字符串。

在圖像波紋管是jsFiddle輸出。 一個未格式化的div.contentTarget ，原始的div.contentSource ，我在div.contentTarget中使用innerHTML，在底部是一個工作解析的div#tester ，它直接在解析器中接收一個字符串。

Answer 1

問題出在您的換行符周圍。 當您將\\n放在javascript中的字符串中時，您將在其中放置一個實際的換行符。

同樣\\n你的HTML里面的內容就是這樣， \\n 。 這不是換行符。 如果您將HTML更改為此（使用實際換行符），它將按預期工作：

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

更新了小提琴

或者，如果您將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/