string.replace() or jquery.html() acting odd

Question

First of all, Sorry for the not-so-descript title, but i couldn't find a way to describe it in a few words.

I'm trying to make a simple Syntax Highlighter, using Javascript and Jquery.

I have a HTML TextArea with some HTML inside, that i want to add classes to, depending on the syntax.

But i have a weird problem with the open and closing tags...

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);
})

Here the weird thing happens when it replaces it, or maybe when it sets the html of #highlighted...

either way, the result is this:

        <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>

The problem there, is that it seems to screw up when it comes to the ,/> and only partially replaces it?

I'm very confuzzled, so if anyone can explain what is going on with the string.replace(), please do =)

see this:http://stackoverflow.com/questions/8644428/how-to-highlight-text-using-javascript — Suchit kumar, Aug 23 '14 at 11:53
MichaC, Can you suggest something else i could use for parsing HTML with Javascript? Suchit: I looked through it, but it seems to be just generic usage of Regex, which i have somewhat under control. I've used regex before with PHP, but i'm trying to make a syntax highlighter in Javascript rather than PHP. Unless there is something specific from that link you were referring too? — Ronin, Aug 23 '14 at 14:24
Instead of regex, you should consider using $('textarea').html() to create a DOM tree from your plaintext. Then you can use either plain JS or jQuery functions to iterate across the tree and output code accordingly. This is the most powerful, and IMO easiest, form of syntax highlighting with javascript. That or use a library. — twinlakes, Aug 23 '14 at 14:37
@twinlakes: The problem with doing that is that when you re-serialize it for display, it's unlikely to be formatted the way the person writing it originally formatted it. But in general, yeah, when you want to parse HTML, having the browser do it makes sense. Just not when you need to avoid making unnecessary changes (like `
` becoming `
`). — T.J. Crowder, Aug 23 '14 at 14:41
@twinlakes: Thanks! I had no idea you could use .html() to create a DOM tree, i thought .html() just returned the html inside as text. So, i should just use .html() and then navigate through the DOM tree returned. Should i still build a string based upon the DOM tree or is there a better way to display it as output rather than HTML afterwards? — Ronin, Aug 23 '14 at 15:50
@Ronin - Sorry! I rushed my answer. The actual way to parse a string of html into a jQuery object (which contains a DOM tree) is to use `$($('textarea').val())`. — twinlakes, Aug 23 '14 at 19:08
@twinlakes: No worries, after trying it and it didn't work, i looked it up and found that solution as well =) but thanks for showing me the right path ^_^ — Ronin, Aug 24 '14 at 07:30

string.replace() or jquery.html() acting odd

0 Answers0