JQuery/JavaScript - highlight a part of text from input or textarea [duplicate]

Answer 1

You have to place a div behind your textarea and then style it according to it's text.
Notes:

• Set your textarea background-color to transparent to see your highlighter color.
• Your highlighter have to be the same style and text content of your textarea to put the span on the right place.
• Set your highlighter text to the same color of it's background or you'll see a effect, the same for the span.

html:

some text highlighted some text
some text highlighted some text

css:

.highlighter, textarea {
    width: 400px;
    height: 300px;
    font-size: 10pt;
    font-family: 'verdana';
}

.highlighter {
    position: absolute;
    padding: 1px;
    margin-left: 1px;
    color: white;
}

.highlighter span {
    background: red;
    color: red;
}

textarea {
    position: relative;
    background-color: transparent;
}

demo