如何突出显示与正则表达式匹配的部分

Question

I am trying to highlight (with red) the error portion of the input (thus the user can easily find out where and what the error is) and matching the error portion with regex.

I tried something like the following: (say I am accepting letters but not digits)

$("#myInputId")
    .filter(function() {
        return this.value.match(/[\d]/);
    })
    .addClass("error")

But the above code is highlighting the whole input, but not only the error portion.

I just put the following image to make what I say is more clear:

NOTE : I am trying achieve this without adding any jQuery plugins for highlighting texts.

Answer 1

The filter function returns true because what is in this.value matches the required regex. Thus the whole element #myInputId is ok. And to this element you apply the error class.

You need to apply the class only to the relevant portion. What you should probably do, is replace the found string within the #myInputId with the same string only enclosed in an error span.

This:

<div id="myInputId">James1234</div>

Becomes this:

<div id="myInputId">James<span class="error">1234</span></div>

You can achieve this by using the found string, like this:

var newStr = wholeStr.replace(foundStr, '<span class="error">'+foundStr+'</span>');

Answer 2

I think this is because you are adding the class "error" to the element which has all the text "James1234" in it.

At the moment I think something like this is happening

<p class="error">
    james1234
</p>

if it was free text and you did text replace and changed the html to something like this

<p>
    james<span class="error"/>1234<span/>
</p>

so to achieve this I think you would need to do something like this

    var searchterm = '1234'
    value.replace(searchTerm, "<span class='error'/>" + searchterm + "<span/>");