Question

首先，对于不那么描述的标题感到抱歉，但我找不到用几句话来形容它的方法。

我尝试使用Javascript和Jquery创建一个简单的语法高亮显示器。

我有一个带有一些HTML的HTML TextArea，我想根据语法添加类。

但是我对开放和结束标签有一个奇怪的问题......

HTML：

<!DOCTYPE html>
<html>

<head>
    <title>Syntax Highlighter</title>
    <link rel="stylesheet" href="css/style.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="js/script.js"></script>
    <meta charset="UTF-8">
</head>

<body>
    <div class="container" id="mainWrapper">
        <div class="container" id="mainContent">
            <div class="container" id="textareaWrapper">
            <textarea name="codeInput" id="codeInput" cols="100" rows="1000" class="textarea">
                <html>
                <head>
                    <title>Test page</title>
                    <link rel="stylesheet" href="css/style.css" />
                </head>
                <body>
                    <p>I'm a Paragraph</p>
                    <img src="img/image.jpg" alt="I'm an image!" />
                </body>
                </html>
            </textarea>
            </div>
            <button id="buttonHighlightSyntax" onClick="addClass()">Huelight</button>
            <div class="container" id="syntaxWrapper">
                <div id="syntaxContainer">

                    <pre id="highlighted">
                    </pre>
                </div>
            </div>
        </div>
    </div>

</body>
</html>


$(document).ready(function(){
// HTML tags: http://www.w3schools.com/tags/
var htmlTags = ["!DOCTYPE", "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr"];

var code = $('#codeInput').val(); // non-highlighted HTML

code = code.replace(/(<\/|<|\s\/>|\/>|>)/g, "<span class=\"openClose\">$1</span>"); // add openClose class to <,</,>,/>, /> 
console.log(code);
$('#highlighted').html(code);
})

这里发生了奇怪的事情，当它取代它时，或者当它设置了#highlighted的html ......

无论哪种方式，结果如下：

        <span class="openClose">&lt;</span>html<span class="openClose">&gt;</span>
        <span class="openClose">&lt;</span>head<span class="openClose">&gt;</span>
            <span class="openClose">&lt;</span>title<span class="openClose">&gt;</span>Test page<span class="openClose"><!--</span-->title<span class="openClose">&gt;</span>
            <span class="openClose">&lt;</span>link rel="stylesheet" href="css/style.css"<span class="openClose"> /&gt;</span>
        <span class="openClose"><!--</span-->head<span class="openClose">&gt;</span>
        <span class="openClose">&lt;</span>body<span class="openClose">&gt;</span>
            <span class="openClose">&lt;</span>p<span class="openClose">&gt;</span>I'm a Paragraph<span class="openClose"><!--</span-->p<span class="openClose">&gt;</span>
            <span class="openClose">&lt;</span>img src="img/image.jpg" alt="I'm an image!"<span class="openClose"> /&gt;</span>
        <span class="openClose"><!--</span-->body<span class="openClose">&gt;</span>
        <span class="openClose"><!--</span-->html<span class="openClose">&gt;</span>dsdad
    </span></span></span></span></span>

那里的问题是，当谈到，/＆gt;时似乎搞砸了。并且只是部分取代它？

我非常困惑，所以如果有人能解释string.replace（）发生了什么，请做=）

string.replace（）或jquery.html（）表示奇怪

0 个答案: