Clever Geek Handbook

Javascriptの複数の構文の強調表示

はい、解析とは何かを知っています。 そして、私は何かを強調する多くの異なるライブラリを知っています。 これだけが、不正確な表現を含まない簡単な小さな例を強調する必要がある場合だけではありません。 そして、このために_正確に解析_任意のコードの多くのバイトを引き出すことは絶対に価値がありません。



コードが返されない場合（およびほとんどの場合）、次のコードを使用できます。 
 コード=コード
 //キーワード（リストは不完全で、思いついたことを書きました）
 .replace（/（var | function | typeof | new | return | if | for | in | while | break | do | continue | switch | cas​​e）（[^ a-z0-9 \ $ _]）/ gi、
 '<span class = "kwrd"> $ 1 </ span> $ 2'）
 //あらゆる種類の括弧
 .replace（/（\ {| \} | \] | \ [| \ |）/ gi、 '<span class = "kwrd"> $ 1 </ span>'）
 //単一行のコメント
 .replace（/（\ / \ / [^ \ n \ r] *（\ n | \ r \ n））/ g、 '<span class = "comm"> $ 1 </ span>'）
 //行
 .replace（/('.*?')/ g、 '<span class = "str"> $ 1 </ span>'）
 //関数（括弧が識別子の後に続く場合）
 .replace（/（[az \ _ \ $] [a-z0-9 _] *）\（/ gi、 '<span class = "func"> $ 1 </ span>（'）
 //私は8桁のタブが好きではないので、4スペース改善してください
 .replace（/ \ t / g、 ''）;








CSS 



  .str {色：赤} / *行は赤* /
 .func {色：青} / *ユーザー関数は青* /
 .comm {色：オレンジ} / *コメントはオレンジ* /
 .kwrd {font-weight：bold} / *キーワードは太字* /
 .str span {color：red; font-weight：normal} / *行内のすべてが行* /
 .comm span {color：orange; font-weight：normal} / *コメント内のすべて-コメント* /




例



- upload images with Picamatic

最後の行のバグに注意してください。 この会話についてさらに



範囲、バグ



このコードは、キーワードによって判断できるjavascriptによって強化されます。 コードにCに似た言語を理解させることは簡単です。



複数行のコメントは例ではあまり使用されておらず、JavaScriptの複数行の文字列には何も使用されていないため、複数行の文字列のように複数行のコメントに煩わされませんでした。



このアプローチよりも悪いのは、テキストが「フラット」であることです。つまり、このアナライザーは、いわば、行またはコメント内の単語をすべてのキーワードと同じキーワードと見なします。 これは私たちには適していないため、CSSルールの.str spanと.comm spanは、コードのブロック構造の認識をCSSの肩に置くために使用されます。 1つの問題は、キーワードまたはユーザー定義関数を含むコメントが行に含まれている場合に発生します。 この場合、行の終わりに関係なく、すべてが行であると見なされます（改行文字まで）。



それでも、二重引用符は存在しません。 別の置換を追加できます。 
  .replace（/(".*?")/ g、 '<span class = "str"> $ 1 </ span>'）


しかし、何かが私をこれから遠ざけます。



ボーナス：jQueryのプラグイン





チェーン可能、複数 



  （関数（$）{

	 $ .fn.syntax = function（）{
		 this.each（関数（）{
			 var jqCode = $（this）;
			 var code = jqCode.text（）;
			コード=コード
			 .replace（/（var | function | typeof | new | return | if | for | in | while | break | do | continue | cas​​e | switch）（[^ a-z0-9 \ $ _]）/ gi、 ' <span class = "kwrd"> $ 1 </ span> $ 2 '）
			 .replace（/（\ {| \} | \] | \ [| \ |）/ gi、 '<span class = "kwrd"> $ 1 </ span>'）
			 .replace（/（\ / \ / [^ \ n \ r] *（\ n | \ r \ n））/ g、 '<span class = "comm"> $ 1 </ span>'）
			 .replace（/('.*?')/ g、 '<span class = "str"> $ 1 </ span>'）
			 .replace（/（[az \ _ \ $] [a-z0-9 _] *）\（/ gi、 '<span class = "func"> $ 1 </ span>（'）
			 .replace（/ \ t / g、 ''）;
			 jqCode.html（コード）;
		 }）;
	 }

	 }）（jQuery）;

	 //例を呼び出す
	 $（ 'pre＃code'）。構文（）;  // id = codeで特定の事前ブロックを強調表示します
	 $（ 'pre'）。構文（）;  //すべてのpreをハイライトします




etcdemaの高度なバージョン 



関数の構文（コード）{
	 var comments = [];  //ここですべてのkamentyを収集します
	 var strings = [];  //ここですべての行を収集します
	 var res = [];  //ここですべてのRegExpを収集します
	 var all = {'C'：コメント、 'S'：文字列、 'R'：res};
	 var safe = {'<'： '<'、 '>'： '>'、 '＆'： '＆'};

	リターンコード
	 // HTMLをマスクします
		 .replace（/ [<>＆] / g、関数（m）
			 {安全に戻る[m];  }）
	 // kamentyを削除します
		 .replace（/ \ / \ * [\ s \ S] * \ * \ // g、関数（m）
			 {var l = comments.length;  comments.push（m）;  return '~~~ C' + l + '~~~';  }）
		 .replace（/（[^ \\]）\ / \ / [^ \ n] * \ n / g、関数（m、f）
			 {var l = comments.length;  comments.push（m）;  return f + '~~~ C' + l + '~~~';  }）
	 //正規表現を削除します
		 .replace（/ \ /（\\\ / | [^ \ / \ n]）* \ / [gim] {0,3} / g、関数（m）
			 {var l = res.length;  res.push（m）;  return '~~~ R' + l + '~~~';  }）
	 //文字列を削除します
		 .replace（/（[^ \\]）（（？： '（？：\\' | [^ ']）*'）|（？： "（？：\\" | [^ "]）*" ））/ g、関数（m、f、s）
			 {var l = strings.length;  strings.push（s）;  return f + '~~~ S' + l + '~~~';  }）
	 //キーワードを選択します
		 .replace（/（var | function | typeof | new | return | if | for | in | while | break | do | continue | switch | cas​​e）（[^ a-z0-9 \ $ _]）/ gi、
			 '<span class = "kwrd"> $ 1 </ span> $ 2'）
	 //括弧を選択します
		 .replace（/（\ {| \} | \] | \ [| \ |）/ gi、
			 '<span class = "gly"> $ 1 </ span>'）
	 //関数名を選択します
		 .replace（/（[az \ _ \ $] [a-z0-9 _] *）[\ s] * \（/ gi、
			 '<span class = "func"> $ 1 </ span>（'）
	 // kamenty、strings、RegExpを返します
		 .replace（/ ~~~（[CSR]）（\ d +）~~~ / g、関数（m、t、i）
			 {'<span class = "' + t + '">' + all [t] [i] + '</ span>';を返します。  }）
	 //改行を設定します
		 .replace（/ \ n / g、
			 '<br/>'）
	 //タブを複雑なスペースに置き換えます
		 .replace（/ \ t / g、
			 '＆nbsp;＆nbsp;＆nbsp;＆nbsp;'）;
 }
他のスタイルがここで必要になります： 
  .S {色：赤} / *行は赤* /
 .func {色：青} / *ユーザー関数は青* /
 .C {色：オレンジ} / *コメントはオレンジ色* /
 .kwrd {font-weight：bold} / *キーワードは太字* /
 .R {色：グレー} / *グレー回帰式* /




upd：修正と追加を考慮して、 スクリプト自体を強調表示しましたが、 etcdemaのバージョンはdema.ru/syntaxです


More articles:


All Articles