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();