String to DOM to String

Question

데이터베이스에서 일부 markdown 텍스트를 받았습니다. 나는 HTML로이 가격 인하를 변환 Showdown.js을 사용하고 다음 가격 인하에 내장 된 코드가있을 때

이

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

이 Showdown.js이 <pre><code> 태그에 잘 싸서, 그래서 str는 다음과 같이 보일 수 있습니다

를

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

이제 SyntaxHighlighter을 사용하여 코드 조각을 강조 표시하는 구문으로 더 예쁘게 만들고 싶습니다. 결국에는 이전에 가지고 있던 모든 것을 포함하는 문자열을 다시 얻고 서식 지정을위한 추가 HTML을 얻는 것이 중요합니다.

$(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 

내가 올바른 방법 오전이에

내 접근 방식은 DOM을 조작 할 수있는 jQuery의 능력인가? 내 .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();