表单内输入内容，DIV内相同的字就变为蓝色，其他的不变。

本帖最后由 wangxiangding89 于 2011-05-04 23:21:59 编辑

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
    <title>Insert title here</title>
    <script type="text/javascript"> function fontChange() {
    var targetDiv = document.getElementsByTagName("div")[0];
    var pattern = document.getElementById("pattern");
    var targetStr = targetDiv.innerText;
    var reg = new RegExp(pattern.value, "g");
    var result = targetStr.replace(reg, function(a, b, c, d) {
    return "<span style='color:blue'>" + a + "</span>";
    });
    targetDiv.innerHTML = result;
    }
    </script>
    </head>
    <body>
    <input id="pattern" onkeyup="fontChange();">
    <div>xsvbngvhiuw3465483246hew</div>
    </body>
    </html>
      

  2.   

    问题非常之多，
    首先FF无效，
    IE下错误也很多。
    其次首先输入字母在输入数字，2个都变无色。
    还有输入2个以上就没法变色了。
      

  3.   

    function fontChange() {
            var targetDiv = document.getElementsByTagName("div")[0];
            var pattern = document.getElementById("pattern");
            var targetStr = targetDiv.innerText || targetDiv.textContent;
            var reg = new RegExp(pattern.value, "g");
            
            var result = targetStr.replace(reg, function(a, b, c, d) {
                return "<span style='color:blue'>" + a + "</span>";
            });
          
            targetDiv.innerHTML = result;
        }
    FF无效的问题解决了。我的想法是，相同的一组字符串，变色。你可能想的是输入a4，那么abcd4中,a和4变色。而我a4是不变色的，输入ab才变色。
    既然方法有了，你照着改下就行
      

  4.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
    <title>Insert title here</title>
    <script type="text/javascript">    function fontChange() {
            var targetDiv = document.getElementsByTagName("div")[0];
            var pattern = document.getElementById("pattern");
            var targetStr = targetDiv.innerText || targetDiv.textContent;

            var reg = new RegExp(toCharPattern(pattern.value), "g");
            
            var result = targetStr.replace(reg, function(a, b, c, d) {
                return "<span style='color:blue'>" + a + "</span>";
            });
          
            targetDiv.innerHTML = result;
        }    function toCharPattern(target) {
            var pattern = "";
    for (var index = 0; index < target.length; index++) {
    var c = target.charAt(index);
    if (pattern.length != 0) {
    pattern += "|";
    }
    pattern += c;
    }
    return pattern;
        }
    </script>
    </head>
    <body>
        <input id="pattern" onkeyup="fontChange();">
        <div>xsvbngvhiuw3465483246hew</div>
    </body>
    </html>
    这个估计是你想要的效果