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

Question

我试图突出（用红色）输入的错误部分（因此用户可以很容易地找出错误的位置和错误）并将错误部分与正则表达式匹配。

我尝试了类似下面的内容:(说我接受字母而不是数字）

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

但是上面的代码突出显示了整个输入，但不仅仅是错误部分。

我只是把下面的图片做成我说的更清楚：

注意：我正在尝试实现此功能而不添加任何jQuery插件来突出显示文本。

Answer 1

filter函数返回true，因为this.value中的内容与所需的正则表达式匹配。因此整个元素#myInputId都可以。对于此元素，您应用error类。

您只需将课程应用于相关部分。您应该做的是将{{1>}中的找到的字符串替换为仅包含在错误范围内的相同字符串。

此：

#myInputId

成为这个：

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

您可以使用找到的字符串来实现此目的，如下所示：

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

Answer 2

我认为这是因为您将“class”类添加到其中包含所有文本“James1234”的元素中。

目前我认为这样的事情正在发生

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

如果它是自由文本，你做了文本替换并将html更改为类似

的内容

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

所以为了达到这个目的，我认为你需要做这样的事情

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