DOM 操作を使用して jQuery_jquery の正規表現を置き換える-jsチュートリアル-php.cn

DOM 操作を使用して jQuery_jquery の正規表現を置き換える

WBOY

リリース： 2016-05-16 16:23:22

オリジナル

1589 人が閲覧しました

B/S 構造クライアントがますます「太り」つつある今日の世界では、フルエンドプログラマはフロントエンドで HTML 文字列を操作する可能性が高く、HTML 文字列を操作しているのではなく、HTML 文字列を操作していることに注意してください。現在のページ。

たとえば、Baidu によって発売されたオンライン HTML リッチテキストエディターである Ueditor は、オンラインでリッチテキストドキュメントを作成でき、その機能は Microsoft Word の合理化バージョンに匹敵します。 Ueditor は Baidu の雰囲気を持っていますが、実際の効果はあまり満足のいくものではありません。すべての画像の幅を 90% に設定するなど、生成される HTML 文字列を 2 回処理する必要があります。

特定のメソッドを通じて、テキストエディターで HTML 文字列を取得できます。その文字列が次のとおりであるとします。

コードをコピーしますコードは次のとおりです:

花のようなサオニアン

謎のピラミッド

夢のような生活

しかし、次に何をすべきでしょうか?文字列のエレガントな処理により、正規表現を考えることが容易になります。ここで正規表現を使用できますか?

答えは「はい」です。まず通常のエフェクトを試してください。すべての画像の幅を 90% に設定する最も簡単な方法は、img タグに style 属性を追加して、style で幅を指定することです。

通常のルールを使用して、最初のステップはすべての img タグを照合することです。img タグには style 属性がある必要はないため、最初に style 属性があるかどうかを確認してから、width: 90%; を直接追加する必要があります。スタイル属性?いいえ、これにより他の元の属性が上書きされる可能性があるため、直接追加するだけで上書きされません。それでもダメ、もともと幅があったらどうしよう。。。

まだ正規表現を書き始めていませんが、最初にプロセスを考えてみると、実際には実装はさらに複雑です。

幸いなことに、考え方を変え、jQuery の助けを借りてこの問題を解決できます。

jQuery の利点は、HTML 文字列を dom 要素に直接パッケージ化できることです。この dom 要素は現在のページには存在せず、メモリ内に配置されます。

jQuery を使用する場合、必要なのは次のコードのみです:

コードをコピーしますコードは次のとおりです:

//変更された HTML 文字列を取得しやすくするためにコンテナを定義します
//jQuery を直接使用して「

」をラップします。このとき、メモリ内に div 要素が存在します。
var $container = $("

");
//これが変更する必要がある HTML 文字列であると仮定します
var html = "

";
//変更するHTML文字列をコンテナに直接挿入
//jQuery は、HTML 文字列を dom 要素に自動的にラップし、メモリ内の div コンテナに挿入するのに十分強力です
$container.append(html);
//コンテナ内のすべての img タグを検索し、
をトラバースします $container.find("img").each(function(i,n){
//各 img 要素について、style 属性の width 属性を直接変更します
// style 属性が存在しない場合は自動的に追加されます。width 属性がすでに存在する場合は、あまり心配する必要はありません。
$(n).css({
幅: "90%"
});
});
// コンテナの HTML コンテンツである、変更された HTML 文字列を取得します
アラート($container.html());

コード内のコメントは非常に詳細なので、あまり説明しませんが、jQuery は実際のページ内の html だけでなく、メモリ内の仮想 html も操作できることを理解する必要があります。

両者を比較すれば、どちらの方法が優れているかが読者の皆さんにはすぐに分かると思います。

Xiao Cai がよく言うように、「問題は解決できると思っていても、時間が経っても解決しない場合は、おそらくあなたの考えが間違っているのです。別の角度から考えてみると、問題は解決します。」解決される！