求页面内输入框，当输入关键字时，自动把关键字用特殊颜色显示的代码

Question

文本的搜索替换，这个是在服务器端完成的，比如google的搜索结果中，在处理是的最后输出中就是这样的应用，比如要搜索 "aaa" 在数据库提取数据后把"aaa" 替换成 "<font color='xxxx' >aaa</font>"就完了。

Answer 1

replace 一下就行了 但不保无错function XXXX()
{
    var seachStr = "xxx";
    var sClassName = "OOO";
    for(var i=0;i<document.body.all.length;i++)
    {
        var tempObj = document.body.all.item(i);
        if(tempObj.innerText.indexOf("seachStr")>=0)
        {
            try
            {
                tempObj.innerHTML = tempObj.innerHTML.replace("<span class=\"" + sClassName + "\">" + seachStr + "</span>",seachStr);
                tempObj.innerHTML = tempObj.innerHTML.replace(seachStr,"<span class=\"" + sClassName + "\">" + seachStr + "</span>");
            }
            catch(e)
            {
            }
        }
    }
}使用说明:
XXX 是过程名只要调用就可以了
xxx 是你要查找的东东
ooo 是你要显示的格式 是个style类
以上代码未经测试
但可以肯定绝对有错 如果你查找的内容是标签名可能导致文档错误.至于如何区分你自己看着办吧

Answer 2

进一步解释
以上代码是循环body下每个元素
查找每个元素的innerTEXT,判断是否存在你要找的内容
如果存在,则将你要查找的文本用一个<span class="ooo"></span>标签包住
为什么使用2次replace? 因为有可能你查找的东西已经被替换过了,为了防止恢复时可能产生的错误,所以这样替换.
为什么使用try? 因为有些元素不支持innerHTML至于恢复时的代码你就自己写了.
可能产生的错误
当查找的内容包含 < > 等符号的时候可能查找不到,因为innerText和innerHTML的内容不一定一样.
当查找的内容是HTML标签的时候 可能产生严重的错误.

Answer 3

谢谢，xdspower、gzdiablo。但这还不是我要的。可能是我没说清楚，不好意思。
我的意思是，需要像一个文档编辑器一样，就像我们写程序用的IDE，输入关键字var 就变颜色，不是关键字就不变。

Answer 4

原理是一样的，你要跟踪输入数据，进行动态检查。
不过一般的文本框是没有这个功能的，你要专门定义文本框，你其实可以看到一些源代码的，比如plone项目中网络文本编辑工具，你就是把其中的一般的像什么连接替换之类的改成你需要的关键字替换。