使用JavaScript创建snytax荧光笔

我想创建一个snytax荧光笔。特别是对于SQL.

我在网上找到了一个解决方案，但是它不起作用。

index.js

var codeElements = $(".article pre code");
var strReg1 = /"(.*?)"/g,
strReg2 = /'(.*?)'/g,
specialReg = /b(new|var|if|do|function|while|switch|for|foreach|in|continue|break)(?=[^w])/g,
specialJsGlobReg = /b(document|window|Array|String|Object|Number|$)(?=[^w])/g,
specialJsReg = /b(getElementsBy(TagName|ClassName|Name)|getElementById|typeof|instanceof)(?=[^w])/g,
specialMethReg = /b(indexOf|match|replace|toString|length)(?=[^w])/g,
specialPhpReg  = /b(define|echo|print_r|var_dump)(?=[^w])/g,
specialCommentReg  = /(/*.**/)/g,
inlineCommentReg = /(//.*)/g;
var htmlTagReg = /(&lt;[^&]*&gt;)/g;
var sqlReg = /b(CREATE|ALL|DATABASE|TABLE|GRANT|PRIVILEGES|IDENTIFIED|FLUSH|SELECT|UPDATE|DELETE|INSERT|FROM|WHERE|ORDER|BY|GROUP|LIMIT|INNER|OUTER|AS|ON|COUNT|CASE|TO|IF|WHEN|BETWEEN|AND|OR)(?=[^w])/g;
codeElements.each(function (){
var string = this.innerHTML,
parsed = string.replace(strReg1,'<span class="string">"$1"</span>');
parsed = parsed.replace(strReg2,"<span class="string">'$1'</span>");
parsed = parsed.replace(specialReg,'<span class="special">$1</span>');
parsed = parsed.replace(specialJsGlobReg,'<span class="special-js-glob">$1</span>');
parsed = parsed.replace(specialJsReg,'<span class="special-js">$1</span>');
parsed = parsed.replace(specialMethReg,'<span class="special-js-meth">$1</span>');
parsed = parsed.replace(htmlTagReg,'<span class="special-html">$1</span>');
parsed = parsed.replace(sqlReg,'<span class="special-sql">$1</span>');
parsed = parsed.replace(specialPhpReg,'<span class="special-php">$1</span>');
parsed = parsed.replace(specialCommentReg,'<span class="special-comment">$1</span>');
parsed = parsed.replace(inlineCommentReg,'<span class="special-comment">$1</span>');
this.innerHTML = parsed;
});

index.css

pre code .string {
color:#A1E46D;
}
pre code .special {
color:#D6665D;
}
pre code .special-js {
color:#6DE4D1;
}
pre code .special-js-glob {
color:#A1E46D;
font-weight:bold;
}
pre code .special-comment{
color:#aaa;
}
pre code .special-js-meth {
color:#E46D8A;
}
pre code .special-html {
color:#E4D95F;
}
pre code .special-sql {
color:#1D968C;
}
pre code .special-php{
color:#597EA7;
}

index . html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
<title>highlightme Test Page</title>
</head>
<body>
<pre>
<code>
var test = "Test";
</code>
</pre>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="index.js"></script>
</body>
</html>

我已经使用了jQuery．如果有任何错误，请帮助我。

我实际上正在创建我自己的snytax荧光笔，所以请不要建议我关于js库。

谢谢

你的index.html中没有任何元素匹配CSS选择器.article pre code

var codeElements = $(".article pre code");
var strReg1 = /"(.*?)"/g,
strReg2 = /'(.*?)'/g,
specialReg = /b(new|var|if|do|function|while|switch|for|foreach|in|continue|break)(?=[^w])/g,
specialJsGlobReg = /b(document|window|Array|String|Object|Number|$)(?=[^w])/g,
specialJsReg = /b(getElementsBy(TagName|ClassName|Name)|getElementById|typeof|instanceof)(?=[^w])/g,
specialMethReg = /b(indexOf|match|replace|toString|length)(?=[^w])/g,
specialPhpReg  = /b(define|echo|print_r|var_dump)(?=[^w])/g,
specialCommentReg  = /(/*.**/)/g,
inlineCommentReg = /(//.*)/g;
var htmlTagReg = /(&lt;[^&]*&gt;)/g;
var sqlReg = /b(CREATE|ALL|DATABASE|TABLE|GRANT|PRIVILEGES|IDENTIFIED|FLUSH|SELECT|UPDATE|DELETE|INSERT|FROM|WHERE|ORDER|BY|GROUP|LIMIT|INNER|OUTER|AS|ON|COUNT|CASE|TO|IF|WHEN|BETWEEN|AND|OR)(?=[^w])/g;
codeElements.each(function (){
var string = this.innerHTML,
parsed = string.replace(strReg1,'<span class="string">"$1"</span>');
parsed = parsed.replace(strReg2,"<span class="string">'$1'</span>");
parsed = parsed.replace(specialReg,'<span class="special">$1</span>');
parsed = parsed.replace(specialJsGlobReg,'<span class="special-js-glob">$1</span>');
parsed = parsed.replace(specialJsReg,'<span class="special-js">$1</span>');
parsed = parsed.replace(specialMethReg,'<span class="special-js-meth">$1</span>');
parsed = parsed.replace(htmlTagReg,'<span class="special-html">$1</span>');
parsed = parsed.replace(sqlReg,'<span class="special-sql">$1</span>');
parsed = parsed.replace(specialPhpReg,'<span class="special-php">$1</span>');
parsed = parsed.replace(specialCommentReg,'<span class="special-comment">$1</span>');
parsed = parsed.replace(inlineCommentReg,'<span class="special-comment">$1</span>');
this.innerHTML = parsed;
});

pre code .string {
color:#A1E46D;
}
pre code .special {
color:#D6665D;
}
pre code .special-js {
color:#6DE4D1;
}
pre code .special-js-glob {
color:#A1E46D;
font-weight:bold;
}
pre code .special-comment{
color:#aaa;
}
pre code .special-js-meth {
color:#E46D8A;
}
pre code .special-html {
color:#E4D95F;
}
pre code .special-sql {
color:#1D968C;
}
pre code .special-php{
color:#597EA7;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="article">
<pre>
<code>
var test = "Test";
</code>
</pre>
</body>

相关内容

最新更新

热门标签：