Javascript标记子字符串onchange事件答案

【问题标题】：Javascript mark substrings onchange eventJavascript标记子字符串onchange事件
【发布时间】：2013-05-14 03:31:53
【问题描述】：

我正在尝试突出显示大字符串的子字符串。以下代码仅在子字符串是大字符串的第一个字母时突出显示。我怎样才能解决这个问题？在此先感谢

 function search() {
        var text = document.getElementById("searchText").value;

        if (!text) return;

        var regex =  new RegExp(text, 'gi');
        var str = document.getElementById("input").innerHTML;
        var n=str.match(regex);

            document.getElementById("input").innerHTML = document.getElementById("input").innerHTML.replace(str, '<span style="background-color:clear;">'+str+'</span>'); // clear 
            document.getElementById("input").innerHTML = document.getElementById("input").innerHTML.replace(n, '<span style="background-color:yellow;">'+n+'</span>');


    }

【问题讨论】：

标签： javascript regex string search replace

【解决方案1】：

试试这个：-

Demo

function search() {
    var hid = document.getElementById('hidtxt').value;
    if(hid.length == 0) hid.value=document.getElementById("input").innerHTML;
        var text = document.getElementById("searchText").value;
       if (!text) return;
        var regex =  new RegExp(text, 'gi');
            document.getElementById("input").innerHTML = hid.replace(regex, '<span style="background-color:yellow;">$&</span>');


    }

【讨论】：

你可以使用$&而不是连接text。
感谢@plalx，我在修复 OP 问题时会考虑它.. :)

【解决方案2】：

str.match(regex) 返回一个数组，这就是替换无法正常工作的原因。

replace 方法可以接受您应该提供给它的正则表达式（以实现全局搜索）。

document.getElementById("input").innerHTML = str.replace(regex, '<span style="background-color:yellow;">'+text+'</span>');

【讨论】：