ホームページ >ウェブフロントエンド >htmlチュートリアル >dom 操作を使用して正規表現を置き換える_html/css_WEB-ITnose

dom 操作を使用して正規表現を置き換える_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:03:461139ブラウズ

現在、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 要素は現在のページには存在せず、メモリに配置されます。

メモリ上の仮想HTMLを操作することも可能です。両者を比較することで、読者の皆様にはどちらの方法が優れているかがすぐに分かると思います。 「問題は解決できると思っているのに、長い間解決していない場合は、あなたの考えが間違っている可能性があります。考えてみれば、問題は解決します。」

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。