ホーム>ネットワークプログラミングチュートリアル>ASP チュートリアル

独自の ASP Web サイト システム用のマークアップ言語を構築する

著者：Eve Cole 更新時間：2009-06-25 17:32:25
動的な Web サイトとして、構築プロセス中に記事のオンライン編集の問題が発生することは避けられません。 HTML には textarea タグが用意されていますが、textarea はプレーン テキストであるため、実際にはこの問題は解決されません。入力時に HTML タグを使用しないと、出力時に最初から最後まで構造のないテキストのプレートが得られます。 WEB デザインでは、DHTML を使用して WYSIWYG オンライン エディターを構築すると、この問題がうまく解決されます。

しかし、目に見えるものだけが解決策ではありません。インターネットをサーフィンしているときに、著者は、いくつかのポータル Web サイトのオンライン エディターが非常にユニークであることに気付きました。これは WYSIWYG (プレビュー機能はあります) ではなく、textarea テキスト フィールドですが、HTML マークアップ言語はサポートしていません。代わりに、独自のマークアップ言語のセットがあります。


図1

図2

筆者は非常にスムーズに使用できると感じており、その利点を次のようにまとめています。

まず、タグが少なく、HTML に比べて非常にシンプルで、Enter キーを押すだけで自動的に段落が生成されるため、一般ユーザーにも受け入れられやすいです。筆者は中国語タグを使用すれば、より多くの国内ユーザーに受け入れられると考えている。

第 2 に、WYSIWYG エディタと比較して、ユーザーは記事の構造をより適切に制御でき、生成されるコードの文字化けが少なくなります。

第三に、視認性は HTML よりもはるかに優れており、プレビュー機能を使用するとさらに優れています。

第 4 に、独自のマークアップ言語はスクリプトをサポートしていないため、より安全です。

著者が少し考えて実践した後、この独自のマークアップ言語を構築する方法を公開します。

まず、Web サイトに必要なシンプルなマークアップ言語のセットを決定します。決定する際は、不要な項目を省略してください。私の場合、Web サイト用に決定したマークアップ言語は次のとおりです。

[image]画像のURL[/image]
[タイトル]テキストの内容[/タイトル]
[字幕]テキスト内容[/字幕] (ユーザーが細分化される可能性を考慮して追加)
[太字]テキストの内容[/太字]
[斜体]テキストコンテンツ[/斜体]
[リンク]ウェブサイト[/リンク]

次に、ブラウザがタグを理解できるようにするための特定のメカニズムを提供します。では、コンテンツが表示されるページ上で、すべてのタグを標準に変換するプログラムを作成する必要があります。 HTML タグですが、ユーザーが入力した HTML コードは事前にフィルターで除外する必要があります。

ステップ 1: HTML コードをフィルタリングします。

これは実際には非常に簡単で、すべての「<」タグを「&lt;」に置き換え、すべての「>」を「&gt;」に置き換えるだけです。これは、ASP では次のステートメントによって実現されます。

Content=replace(コンテンツ,"<","&lt;")

Content=replace(content,">","&gt;")

（上記コードにおいて、contentは表示したい内容を格納する変数です。以下にある場合も同様の意味です。）

ステップ 2: マークアップを HTML に翻訳する

これは、すべての [< および] タグを > に置き換えて、中国語 (写真など) を英語 (IMG など) に翻訳するだけではないため、比較的複雑です。理由は 2 つあります。

1 はマークアップのコンテンツであり、さまざまな分類に従って異なる方法で処理する必要があります。

最初のタイプは、次のようにユーザーに直接表示されます。

[タイトル]テキスト[/タイトル]

この時点では、タグを対応する英語に翻訳するだけで済みます。たとえば、上記のタグは <h1>text</h1> に翻訳されます。

2 番目のカテゴリは、次のようにユーザーに直接表示されません。

[写真]写真のURL[/写真]

このとき、タグ途中の「画像URL」は表示したいURLだけであり、HTMLでは<IMG>タグのSRC属性となり、このタグに終了タグは必要ありません。 HTML です。つまり、直接翻訳した結果は「はい、間違っています」になります。

3 番目のカテゴリは、次のように直接表示され、同時に属性として使用されます。

[リンク]ウェブサイト[/リンク]

2. 項目タグのあるすべての場所を翻訳する必要はありません。たとえば、ユーザーはコンテンツを表現するために記号「[」と記号「]」を使用する必要がある場合があります。このようなタグは「<」と翻訳されます。 >」は明らかにユーザーの要望に沿ったものではありません。

発生する問題を分析した後、プログラムを作成するためのアイデアと参考プログラムを以下に示します。

タグごとに必要な変換方法が異なるため、異なるタグを 1 つずつ変換する必要があります。

単一のタグについては、記事内で複数回出現する場合もあれば、一度も出現しない場合もあります。プログラムは、最初に特定のタグの開始タグを最初から最後までチェックする必要があります (たとえば、「Picture]Picture Address[/Picture」の場合)。 ]" は " [Picture]") にチェックが入ったら、その位置から終了マークのチェックを開始します。これもチェックされている場合は、これが必要なマークであることを意味し、終了マークがチェックされていない場合は、これは、私たちが望むマークアップではなく、ユーザー自身が表示するコンテンツのみを意味します。チェック後、タグは HTML タグに変換され、タグ内の内容はタイプに応じて異なる処理が行われます。終了後は、終了タグの位置から記事の最後までチェックが続けられます。

実際の記述では、再帰の考え方を使う必要があります。 以下は、タグ [picture]picture address[/picture] を変換するサンプルプログラムです。

関数TranslateImg(Str)
Start=instr(str, "[picture]") 'マークの開始位置を確認します start=0 の場合、関数を終了します '開始位置は 0、つまりそのようなマークがないことを意味し、プログラムは終了します End=instr( start, str,"[/ Picture]" '開始位置の後に表示される終了マークの位置を確認します。end=0 の場合は関数を終了します。'終了マークの位置は 0 です。つまり、終了マークはありません。プログラムは終了します MidStr=mid(str, start+4, end-start-4) ' 真ん中のコンテンツにマークを付けます ReplaceStr=mid(str, start, end-start+5) ' 真ん中のコンテンツにマークを付けます置換するコンテンツとして Str=replace(instr, ReplaceStr,"<img src= ”&MidStr&”>”) 'マークアップを HTML に変換
TranslateImg Str 'この関数を再帰的に実行します
終了機能

上記の分析を通じて、読者は独自の分析を通じて自分の Web サイト用の一連の「MyHTML」マークアップ言語を構築できると思います。

実際の開発では、マークのネスティングの処理をユーザーをデータベースに送信する前に翻訳するか、ユーザーが記事を閲覧してデータベースから呼び出して提供するかどうかなど、いくつかの解決する必要がある問題がまだあります。マークの付いたボタンは、ユーザーの操作体験を容易にするために挿入されています。この記事は、読者の鑑賞を目的としています。
関連記事