Question

I have a table in HTML which has three columns

i.e Error – User Input – Correct Format

When I hover over the table the rows highlight

\CSS

table tr:hover                
 { 
    font-weight: bolder; 
    color:black;
 }

When I hover and do that I want to text also to be highlighted in my text area

i.e if I hover over the first row I want the text in User Input column to also be bold in the text area so the user can see where the error is

i.e Error – User Input – Correct Format
Flight ID 12 [0-9]{3}

So as I hover over that row I want it to search the text area for 12 and bolden every 12 it finds and same for other rowns.

SUMMARY

what ever is in the USER INPUT column bolden in text area if found

http://jsfiddle.net/EZj9T/ so far what I have is this so when u hover over a row in the header one column aswell as boldening the text in there but to also bolden the text found in the text area

Answer 1

I don’t think you can add markup (such as a STRONG tag) in a textarea. You are also quite limited to what visual styles you can apply.

If you have a DIV instead of a textarea (like a contenteditable), you would do something like:

$('tr').hover(function() {
    var ta = $(this).find('.textarea');
    ta.html(ta.html().replace(/12/g,'<strong>12</strong>'));
});

UPDATE

Here is an example of what I think you are trying to do: http://jsfiddle.net/EZj9T/4/

You need to use a contenteditable DIV to be able to highlight words using markup inside, textarea won’t allow it.

$('tr').hover(function() {
    var text = [];
    $.each($(this).find('td'), function() {
        text.push($.trim($(this).text()));
    });
    highlight(text);
},function() {
    highlight(null);
});

var area = $('div[contenteditable]');

function highlight(what) {
    area.html(area.html().replace(/<strong\/?>/g,''));
    $.each(what || [], function(i, val) {
        area.html(area.html().replace(new RegExp(val,'gi'),'<strong>'+val+'</strong>'));
    });
}