javascript替换关键字

var ele= document.getElementById('text');
var children = ele.childNodes;
for(var i=0; i< children.length; i++)
{
    if(children[i].nodeType == 3)
    {
        //如果存在关键字，则把该节点改成元素节点，给关键字加上超链接
    }
}

解决方案 »

  1.   


    <html>
    <head>
    <title>tt</title>
    <script type='text/javascript' src='/js/xmlhttp.js'></script>
    <script>
        function showSearchResult(){
            
          
            var text = document.getElementById('text').innerHTML;
            
            text = text.replace(/(?:索尼爱立信|C510c|320)/ig,function(a,b,c){
                       return '<a href="#" >'+a+'</a>';
            });
            
         
            document.getElementById('text').innerHTML = text;
       
        }</script>
    </head><body onload="showSearchResult()"><div class="text" id="text" style="font-size:14px;">
    <!-- 索尼爱立信 -->
    <pre>107×47×12.
    5mm的C510c，</pre>
                        
    　　索尼爱立信C510c　　　可选颜色：黑色、银色<BR><BR>　　参考报价：行货/暂缺；改版机/ 1500元
    　　在不久前，索尼爱立信推出了C905c最新版本的升级固件，通过升级固件后，C905能为用户提供人脸识别与微笑拍摄功能。而索尼爱立信最新推出的Cyber-shot手机——C510c，该机虽然是一款针对中低端消费市场的机型，但其却与升级固件后的C905c一样，同样具备人脸识别与微笑快门功能的支持，是目前索尼爱立信旗下功能最为强大的一款320万像素拍照手机。
    <IMG src="http://img001.photo.21cn.com/photos/album/20090313/o/320.jpg" border=0 type="0">
    　　作为索尼爱立信Cyber-shot系列中的一员，C510c沿用了经典的直板外观造型，并在细节处理上融入了一些新的元素，让人感觉充满活力。机身尺寸为配备有2.2英寸的QVGA分辨率屏幕，并搭载有320万像素摄像头，算上电池的机身重量仅为92g。由于采用滑盖式镜头盖设计的缘故，C510c的摄像头能够得到很好的保护，而且启动拍照功能也很方便，只需打开滑盖式镜头盖便可。C510c不仅支持自动对焦、人脸识别与微笑拍摄功能，同时其还设置有双LED补光灯，并具备数码防抖、防红眼闪光、场景模式、BestPic模式以及地理位置信息标注功能。</P>
    <IMG src="http://img001.photo.21cn.com/photos/album/20090313/o/C510c.jpg" border=0 type="0">
    </div>
    </body>
    </html>
      

  2.   


    被HTML标签包含的内容如果是那三个关键字的话  不去替换它 
    反过来说，就是替换该元素节点下所有子文本节点里面的关键字f(children[i].nodeType == 3)  判断是否文本节点
    如果是文本节点，且里面存在关键字，那么就创建一个元素节点，替换此文本节点（文本节点里面不能包括元素a,也就是超链接，所以必须用元素节点替换，并对关键字进行处理
      

  3.   

    思路是上面这样子拉，当然，也不一定要新建一个元素节点，也可以把文本节点拆分为几个节点,
    var e = createDocumentFragment();
    把文本节点拆分后的节点全部保存在此元素下： e.appendChild();
    a.append(document.createElement("a"));
    a.append(document.createTextNode());然后替换文本节点 replaceChild
      

  4.   

    <body>
    <div class="text" id="text" style="font-size:14px;">
    <!-- 索尼爱立信 -->
    <pre>107×47×12.
    5mm的C510c，</pre>
                        
    　　索尼爱立信C510c　　　可选颜色：黑色、银色<BR><BR>　　参考报价：行货/暂缺；改版机/ 1500元
    <P style="TEXT-INDENT: 2em">　　在不久前，索尼爱立信推出了C905c最新版本的升级固件，通过升级固件后，C905能为用户提供人脸识别与微笑拍摄功能。而索尼爱立信最新推出的Cyber-shot手机——C510c，该机虽然是一款针对中低端消费市场的机型，但其却与升级固件后的C905c一样，同样具备人脸识别与微笑快门功能的支持，是目前索尼爱立信旗下功能最为强大的一款320万像素拍照手机。
    <IMG src="http://img001.photo.21cn.com/photos/album/20090313/o/320.jpg" border=0 type="0">
    　　作为索尼爱立信Cyber-shot系列中的一员，C510c沿用了经典的直板外观造型，并在细节处理上融入了一些新的元素，让人感觉充满活力。机身尺寸为配备有2.2英寸的QVGA分辨率屏幕，并搭载有320万像素摄像头，算上电池的机身重量仅为92g。由于采用滑盖式镜头盖设计的缘故，C510c的摄像头能够得到很好的保护，而且启动拍照功能也很方便，只需打开滑盖式镜头盖便可。C510c不仅支持自动对焦、人脸识别与微笑拍摄功能，同时其还设置有双LED补光灯，并具备数码防抖、防红眼闪光、场景模式、BestPic模式以及地理位置信息标注功能。</P>
    <IMG src="http://img001.photo.21cn.com/photos/album/20090313/o/C510c.jpg" border=0 type="0">
    </div><SCRIPT LANGUAGE="JavaScript">
    var keywords = [["索尼爱立信","font-weight: bold;text-decoration: none;color: #0e3987;","http://data.nba.tom.com/teampop.php?id=1610612747","http://nba.tom.com/teams/lakers/index.html"],
    ["C510c","font-weight: bold;text-decoration: none;color: #0e3987;","http://data.nba.tom.com/teampop.php?id=1610612747","http://nba.tom.com/teams/lakers/index.html"],
    ["320","font-weight: bold;text-decoration: none;color: #0e3987;","http://data.nba.tom.com/teampop.php?id=1610612745","http://nba.tom.com/teams/rockets/index.html"]];//v1.9.3 gbk
    var bIE = (navigator.appName.indexOf("Microsoft") != -1);
    var documentObj = document.compatMode=="CSS1Compat"?document.documentElement:document.body;
    var tID = null;
    function filterNode(Node) {
        if (Node.tagName=="IMG" || Node.tagName=="A" ||  Node.tagName=="SCRIPT" || Node.tagName== "OBJECT")    
            return false;
        var pNode = Node.parentNode;
        while (pNode.tagName != "BODY") {
            if (pNode.tagName=="IMG" || pNode.tagName=="A" ||  pNode.tagName=="SCRIPT" || pNode.tagName=="OBJECT")    
                return false;
            pNode = pNode.parentNode;
        }
        return true;
    };function replaceKeyword(id, keyword, css) {
    var isF = 0;
    if (bIE) {
    var textRange = document.body.createTextRange();
    while (textRange.findText(keyword)) {
    if(isF>1){
    break;
    }
    var parentNode = textRange.parentElement();
    if (filterNode(parentNode)) {
    var kwAnchor = '<a href="'+ keywords[id][3] +'" target="_blank" style="'+ css +'" onmouseover="window.clearTimeout(tID);showHwMiniDiv('+ id +', event, this);" onmouseout="tID=window.setTimeout(\'hideHwMiniDiv()\',1500);">'+ keyword +'</a>';
    textRange.pasteHTML(kwAnchor);
    //break;
    isF++;
    }
    textRange.collapse(false);
    }
    } else {
    Accept_Node = function (node) {
    if (node.tagName == "IMG" || node.tagName == "A" || node.tagName == "FORM" || node.tagName == "OBJECT" || node.tagName == "SCRIPT") {
    return NodeFilter.FILTER_REJECT;
    } else {
    return NodeFilter.FILTER_ACCEPT;
    }
    };
    var TreeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, Accept_Node, false);
    var vNodes = new Array();
    var range = document.createRange();
    while (cNode = TreeWalker.nextNode()) {
    if (cNode.nodeValue != null) {
    vNodes[vNodes.length] = cNode;
    }
    } 
    for (var i=0; i < vNodes.length; i++) {
    if(isF>1){
    break;
    }
    var key = vNodes[i].nodeValue;
    var pos = key.indexOf(keyword);
    if (pos != -1) {
    range.selectNode(vNodes[i]);
    range.setStart(vNodes[i], pos);
    range.setEnd(vNodes[i], range.startOffset + keyword.length);
    range.deleteContents();
    var nNode = document.createElement("span");
    ArchorTag = '<a href="'+ keywords[id][3] +'" target="_blank" style="'+ css +'" onmouseover="window.clearTimeout(tID);showHwMiniDiv('+ id +', event, this);" onmouseout="tID=window.setTimeout(\'hideHwMiniDiv()\',1500);">'+ keyword +'</a>';
    nNode.innerHTML = ArchorTag;
    range.insertNode(nNode);
    //break;
    isF++;
    }
    }
    }
    };function getElementPos(el) {
    var ua = navigator.userAgent.toLowerCase();
    var isOpera = (ua.indexOf('opera') != -1);
    if(el.parentNode === null || el.style.display == 'none'){
    return false;
    }
    var parent = null;
    var pos = [];
    var box;
    if(el.getBoundingClientRect){
    box = el.getBoundingClientRect();
    var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
    var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
    return {x:box.left + scrollLeft, y:box.top + scrollTop};
    }
    else if(document.getBoxObjectFor){
    box = document.getBoxObjectFor(el);
    var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
    var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
    pos = [box.x - borderLeft, box.y - borderTop];
    }
    else{
    pos = [el.offsetLeft, el.offsetTop];
    parent = el.offsetParent;
    if (parent != el) {
    while (parent) {
    pos[0] += parent.offsetLeft;
    pos[1] += parent.offsetTop;
    parent = parent.offsetParent;
    }
    }
    if (ua.indexOf('opera') != -1|| ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )){
    pos[0] -= document.body.offsetLeft;
    pos[1] -= document.body.offsetTop;
    }
    }
    if (el.parentNode) {
    parent = el.parentNode; 
    }else {
    parent = null; 
    }
    while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML'){ 
    pos[0] -= parent.scrollLeft;
    pos[1] -= parent.scrollTop;

    if (parent.parentNode) {
    parent = parent.parentNode; 
    }else { parent = null; }

    }
    return {x:pos[0], y:pos[1]};
    };
    function showHwMiniDiv(id, e, kwObj){
    var keyword = kwObj.innerHTML;
    var pos = getElementPos(kwObj);
    var anchorX = pos.x;
    var anchorY = pos.y;
    var miniDiv = document.getElementById("hw_mini_div");
    if(parseInt(e.clientY) > miniDiv.offsetHeight+30) {
    miniDiv.style.top = (anchorY-miniDiv.offsetHeight)+"px";
    }
    else {
    miniDiv.style.top = (anchorY+20)+"px";
    }
    if((parseInt(documentObj.clientWidth)-parseInt(e.clientX)) > miniDiv.offsetWidth+30) {
    miniDiv.style.left = (anchorX+30)+"px";
    }
    else {
    miniDiv.style.left = (anchorX-miniDiv.offsetWidth-10)+"px";
    if(parseInt(miniDiv.style.left) < 0) {
    miniDiv.style.left = (anchorX+30)+"px";
    }
    } miniDiv.style.visibility = "visible";
    miniDiv.style.display = ''; miniDiv.innerHTML = '<iframe marginwidth=0 marginheight=0 scrolling=no frameborder=0 width="508" height="220" allowtransparency="true" src="http://adserve.tom.com/hw/hw_mini.html?hw_keyword='+ keywords[id][0] +'&hw_url='+ encodeURIComponent(keywords[id][2]) +'"></iframe>';};function hideHwMiniDiv(){
    var miniDiv = document.getElementById("hw_mini_div");
    miniDiv.innerHTML = "";
    miniDiv.style.visibility = "hidden";
    };function hwInit(){
    document.write('<div id="hw_mini_div" style="position:absolute; visibility:hidden; top:0px; left:0px; width:508px; height:220px;" onmouseover="window.clearTimeout(tID);" onmouseout="window.setTimeout(\'hideHwMiniDiv()\',1500);" ></div>');
    var keyword;
    for(var i=0; keyword=keywords[i]; i++){
    replaceKeyword(i, keyword[0], keyword[1]);
    }
    };
    hwInit();
    </SCRIPT></body>
    </html>