How to formal paragraph text via jquery?

Question

I'm trying to create a syntax highlighter that reviews code and adds bolding to certain keywords. I attempted to replace a given keyword with <b> keyword </b> , but the <b> tags were actually visible in the paragraph. How can I actually format the text? This is my code.

var textbox = $("#textbox")
var code = $("#code")

var patterns = {
    "<b> </b>": ["local", "function"]
}

function format(text) {
    for (var pattern in patterns) {
        for (var keyword in pattern) {
            text = text.replace(patterns[pattern][keyword], pattern.replace(" ", patterns[pattern][keyword]))
        }
    }
    return text
}

textbox.change(function() {
    code.text(format(textbox.val()))
})

Answer 1

Your problem is you are using text() method which will treat any html entities as text also.

Use html() instead since you are including html tags

textbox.change(function() {
    code.html(format(textbox.val()))
})