4

テキストを太字、下線、またはネスティングで取り消し線にする独自のタグを実現するタスクがあります。のような

*bold text* _underlinetext_ -strikethrough-

また、次のような独自のハイパーリンクを作成する必要があります

[link | http://stackoverflow.com]

最初に思いついたのは、正規表現を適用することです。コード：

View.prototype.parseText = function(text) {

text = text.replace(/\*([^\*]+)\*/g, '<b>$1</b>');
text = text.replace(/\_([^\_]+)\_/g, '<u>$1</u>');
text = text.replace(/\-([^\-]+)\-/g, '<s>$1</s>');
text = text.replace(/\[([^\|].+)\|(.+)\]/g, '<a href="$2">$1</a>');

return text;};

機能していますが、拡張性が必要です。正規表現はハードコーディングされているため、お勧めできません。有限状態マシン (または任意の jQuery プラグイン) でそのタスクを実現するにはどうすればよいですか? どんな助けにも感謝します。

4

3 に答える 3

3

何をするにしても、タグ付けシステムを拡張するには、1. タグを定義し、2. 同等の HTML に置き換える必要があります。

js で独自のパーサーを作成したとしても、結局のところ、上記の 2 つの手順を実行する必要があるため、現在のパーサーよりも拡張性は高くありません。

正規表現は、他の要件がない限り、ジョブのツールです (つまり、そのような要素内でのみ置換しますが、解析が必要な別の要素で何か他のことを行います)。

機能を拡張する必要がある場合は、正規表現呼び出しを関数にラップし、その関数に正規表現置換を追加するだけです。複数のページで必要な場合は、外部の js ファイルに追加します。

function formatUserContent(text)
{
  text = text.replace(/\*([^\*]+)\*/g, '<b>$1</b>');
  text = text.replace(/\_([^\_]+)\_/g, '<u>$1</u>');
  text = text.replace(/\-([^\-]+)\-/g, '<s>$1</s>');
  text = text.replace(/\[([^\|].+)\|(.+)\]/g, '<a href="$2">$1</a>');
  return text;
}

それが完了したら、機能を拡張することは追加するのと同じくらい簡単です

text = text.replace(/\+([^\-]+)\+/g, '<em>$1</em>');

関数の本体で。独自の有限ステート マシンをロールアウトすることは、拡張が容易になるとは思えません。まったく逆です。

将来の未知の時点で数分節約できることを期待して、有限状態マシンに何時間も費やすことは、良い投資ではありません...もちろん、有限状態マシンを作成する言い訳が必要な場合を除きます。 、 どうぞ。

補足として、正規表現をもう少しばかげたものにすることをお勧めします。

text = text.replace(/\[([^\|].+)\|\s*(http://.+)\]/g, '<a href="$2">$1</a>');

（ユーザーのために仕事をするUI要素がない限り）

于 2012-12-22T16:07:48.360 に答える
1

おそらく、既存のライブラリ、たとえばhttp://www.showdown.im/のMarkdownライブラリを使用したい場合があります。

独自に作成する場合は、ソースコードを調べて、その解析方法（および他の言語のMarkdownプロセッサのソースコード）を確認することをお勧めします。あなたへのいくつかの推奨事項：

  • マークアップを操作するためにjQueryを使用する
  • 言語の解析に正規表現を使用しないでください。マークアップ要素が混在していると、問題が発生します。
于 2012-12-22T15:36:37.107 に答える