replace 全局查找

　　想做個(gè)類似于 word的查找替換功能，給查找到的詞添加標(biāo)簽,并設(shè)置背景，加以強(qiáng)調(diào)，但是在使用replace時(shí)出了故障，各位能幫我解決一下ｂｕｇ么？－

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
        }
        #box{
            width: 500px;
            height: 300px;
            border:1px solid #ccc;
        }
        #sea{
            width: 300px;
            height: 100px;
            background: #fad;
            left: 0;right: 0;bottom: 0;top: 0;margin: auto;
            position:absolute;
            display:none;
            text-align: center;
        }
        i{
            background: red;
        }
    </style>
</head>
<body>
    <button id="showsearch">查找</button>
    <div id="box">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique magni, aut. Cum quos quam ad dignissimos molestias vero nihil quo
    </div>
    <div id="sea">
        <h3>請輸入查找內(nèi)容：</h3>
        <input type="text" id="searchkeyword" autofocus="autofocus"><button id="isearch">查找</button>
    </div>
    
    <script>
        var oBox = document.getElementById("box");
        var showSearch = document.getElementById("showsearch");
        var iSearch = document.getElementById("isearch");

        var str = oBox.innerHTML;
        var strx,stry;
        //點(diǎn)擊時(shí) 顯示查詢框 獲取查詢詞
        showSearch.onclick = function(){
            sea.style.display= "block";
            iSearch.onclick = function(){
                strx = searchkeyword.value;
                sea.style.display= "";
                a = '<i>'+strx+'</i>';
                searchs(strx,a);
            }
        }
        
        //查詢函數(shù)
        function searchs(x,y){
            for( var i = 0,l = str.length;i<l; i ++ ){
                str = str.replace(x,y)
                console.log(str);
                console.log(str.length)
            }
            oBox.innerHTML = str;
        }
    </script>
</body>
</html>

故障的地方在這里，每一次查詢都會(huì)從第一次查詢到的詞開始，造成了重復(fù)死循環(huán)。該怎樣才能把第一次的詞跳過去呢？我嘗試過給查詢函數(shù)添加個(gè)i;

function searchs(x,y){
    for( var i = 0,l = str.length;i<l; i ++ ){
        str = str.replace(x,y);
                
        //但是仍然是死循環(huán)
        i = str.charCodeAt(i) + 8;
                
        console.log(str);
        console.log(str.length)
    }
    oBox.innerHTML = str;
}

圖片描述

回答

編輯回答

維他命

replace第一個(gè)參數(shù)傳一個(gè)全局模式的正則就可以了

function searchs(str, match, replace) {
  const reg = new RegExp(match, 'g')
  return str.replace(reg, replace)
}

const str = 'Lorem ipsum dolor sit a met a';
const result = searchs(str, 'a', '<i>a</i>')
console.log(result)

// Lorem ipsum dolor sit <i>a</i> met <i>a</i>

2018年8月30日 10:05

編輯回答

旖襯

你怎么會(huì)覺得 i 能影響到 str.replace 呢，替換的字符帶原有字符的情況下最好不用 replace ，樓上換正則的方式如果高亮文字里包含正則的特殊字符就不行了。

可以這么做

function searchs(x,y){
    oBox.innerHTML = str.split(x).join(y);
}

2017年11月22日 14:43

編輯回答

帥到炸

你思路可能有問題...

let i = -1;
while ((i = str.indexOf(x)) != -1) 
    str= str.replace(x, y);
console.log(str);

2018年8月12日 11:13

編輯回答

使勁操

iSearch.onclick = function(){
    var box = document.getElementById('box');
    box.textContent = box.textContent;
    var str = document.getElementById('box').textContent;
    var regx = new RegExp('(' + document.getElementById('searchkeyword').value + ')', 'gi');
    box.innerHTML = str.replace(regx, '<i>$1</i>')
}

呃……沒考慮查詢特殊字符的情況，自己改吧~

2018年7月2日 15:58