How to highlight words from JSON dictionary as user types them in text aeria, and replace them with their descriptions on form submission?

Question

I wonder how to having some JSON dictionary like:

[
    {
        "name": "Ann.c",
        "realvalue": "./34534j435345j3b3"
    },
    {
        "name": "Ann.h",
        "realvalue": "./333dfsdGjh45j3b5"
    }

]

And text input where user enters into something like: gcc -o test Ann.c -lcrypto into textaeria how to highlight Ann.c with some color and on form submition replace with its realvalue?

Update: I am trying here.. I know how to parse dictionary, but I can not make it highlight even simple word inside of form text input box=( (I try to use this lib)

So is such thing possible with text aeria and how to do it?

Update: Wel I've done something kind of what will work for me using this lib...

Answer 1

A not so cool method will be to change the entire innerHTML and and at the places u want highlights u can enter a div element with required color and specifications.

Answer 2

You can implement the syntax-ighlighting part by overlaying an element (such as a <span>) on top. It's probably best to generate and display the highlight on the 'blur' event and to hide the overlay when editing.

You can intercept the form submission with jquery and re-write the input values as needed. For example:

$('form#myform').submit(function() {
    $('input.syntaxhighlight', this).each(function() {
        this.value = highlight(this.value) ;   // call to 'highlight()' function.
    }) ;
}) ;