2011-12-21 14 views
5

開発中のアプリケーションでは、ユーザーがテキストボックスにHTMLを入力して、ページ上の要素を編集します。この段階では、ユーザーは任意の種類のコンテンツ、壊れたHTMLやテキストノードを追加することができます。JavaScriptを使用したHTMLのクリーニング

私はややきれいなコードを取得することを確認するために、私はこの

を行う
var s = document.createElement('div'); 
s.innerHTML = content; 
// loop over each node in s, and if text node is found, wrap in span. 
content = s.innerHTML 

このスニペットでの問題は、そのコンテンツが<TD>Text</TD>たですTDがあることはできないので、私が得る結果は、TextですDIVにあります。

すべての場合に有効なコンテンツを入手するための修正はありますか?

答えて

0

最良の解決策は、HTML Tidyを実行しているサーバーページにHTML文字列を渡してから、「クリーン」バージョンを返すことです。私は恐れているクライアント側の唯一の解決策については気づいていません。

EDIT:1つの安いソリューションは、あるいは迅速jQueryを使ってDOM自体を使用することです:

var input='<div><td>foo</td>'; 
var output = $('<div>'+html+'</div>').html(); //=> '<div>foo</div>' 

これは、すべてのエラーをクリーンアップしませんが、あなたのために十分であるかもしれません。

1

DOMを使用してそれを行う際の問題は、htmlがスニペットであることが許可されているという条件を追加するため、完全に修正されたhtmlが本当に必要ないということです。不正な形式のHTMLを修正したい場合や、そうでない場合があります。ビットをグーグルで

はこのjQueryプラグイン投げ:http://www.davidpirek.com/blog/html-beautifier-jquery-plugin

を、私はそれを保証することはできません。

グラハムと同意して、HTML Tidyを提案するのは、成熟していて、応答を待つ必要があっても速いからです。

関連する問題