javascript - 字符串到 DOM 到字符串

Question

我从数据库中获取一些 Markdown 文本。我正在使用 Showdown.js 将此 Markdown 转换为 HTML:

var showdown = new Showdown.converter();
var str = showdown.makeHtml(myDatabaseString);

当 markdown 中嵌入代码时，Showdown.js 会将其很好地包装到 <pre><code> 中标签，所以str可能看起来像这样:

<p>Some text bla</p><pre><code>Some code</pre></code><p>Text again</p>

现在我想通过使用 SyntaxHighlighter 语法突出显示代码片段来使事情变得更漂亮。重要的是，最终我会返回一个包含之前所有内容的字符串，以及用于格式化的附加 HTML。

我的方法是利用 JQuery 操作 DOM 的能力:

$(str).each(function() {
    // or can I select only pre within $(str) directly?
    // everything I tried so far to do that failed miserably
    if($(this).is('pre')) {
        var code = $('code', $(this)).text();
        // brush is my SyntaxHighlighter brush that I created earlier
        $('code', $(this)).text(brush.getHtml(code));
        // when I console.log($('code', $(this))) now, everything worked
        // out perfectly
    }
});
// but now I lost all my changes for some reason :-(

return str; // I need to return this as a string again

我走的路对吗？如何保留我在 .each 内所做的更改循环？

Answer 1

这是因为您正在创建一个与 str 变量无关的 jQuery 对象，您应该使用创建的 jQuery 对象。事实上，您正在修改创建的 jQuery 对象的元素并返回原始/未更改的 str 变量。我建议:

// Creating a wrapper element 
// and setting it's content by using str variable
var $wrapper = $('<div/>').html(str);

// Modifying descendant pre elements
$wrapper.find('pre').each(function(){
   // implementing the logic
});

// Getting modified HTML content of the created wrapper element
str = $wrapper.html();