使用JavaScript創建語法熒光筆-有解無憂

我想創建一個 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 >"$1"</span>');
    parsed = parsed.replace(strReg2,"<span class=\"string\">'$1'</span>");
    parsed = parsed.replace(specialReg,'<span >$1</span>');
    parsed = parsed.replace(specialJsGlobReg,'<span >$1</span>');
    parsed = parsed.replace(specialJsReg,'<span >$1</span>');
    parsed = parsed.replace(specialMethReg,'<span >$1</span>');
    parsed = parsed.replace(htmlTagReg,'<span >$1</span>');
    parsed = parsed.replace(sqlReg,'<span >$1</span>');
    parsed = parsed.replace(specialPhpReg,'<span >$1</span>');
    parsed = parsed.replace(specialCommentReg,'<span >$1</span>');
    parsed = parsed.replace(inlineCommentReg,'<span >$1</span>');

    this.innerHTML = parsed;
});

索引.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;
}

索引.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 庫。

謝謝你

uj5u.com熱心網友回復：

您的 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 >"$1"</span>');
    parsed = parsed.replace(strReg2,"<span class=\"string\">'$1'</span>");
    parsed = parsed.replace(specialReg,'<span >$1</span>');
    parsed = parsed.replace(specialJsGlobReg,'<span >$1</span>');
    parsed = parsed.replace(specialJsReg,'<span >$1</span>');
    parsed = parsed.replace(specialMethReg,'<span >$1</span>');
    parsed = parsed.replace(htmlTagReg,'<span >$1</span>');
    parsed = parsed.replace(sqlReg,'<span >$1</span>');
    parsed = parsed.replace(specialPhpReg,'<span >$1</span>');
    parsed = parsed.replace(specialCommentReg,'<span >$1</span>');
    parsed = parsed.replace(inlineCommentReg,'<span >$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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/466621.html

標籤：javascript html jQuery css

上一篇：當我單擊單選按鈕時，選中的屬性不會改變

下一篇：單擊“X”按鈕時如何關閉彈出視窗和停止視頻