說(shuō)來(lái)慚愧 菜雞一枚 在此記錄一下心得
<div id="box">qqqqqqqq啊啊WWWWWWWWWWWQQ啊<p>啊Q</p> QQwwwwQQQasdadqq</div>
var str = document.querySelector("#box").innerHTML;
var heights = str => `<span style="color:red;">${str}</span>`;
function fun(text,val){
var a = new RegExp(val,'gi');
return text.replace(a,function(num){
return heights(num)
})
}
document.querySelector("#box").innerHTML = fun(str,'q')
今天重點(diǎn)看了一下replace函數(shù)场刑，往日只知是個(gè)字符串替換的方法，沒(méi)深入研究详拙，導(dǎo)致最近倆日冥思苦想质蕉，
參數(shù)1：字符串或正則
參數(shù)2 ：要替換的 字符串 或函數(shù)
函數(shù)里有三個(gè)參數(shù)，不明白的童鞋可以console.log在控制臺(tái)查看
通過(guò)arguments來(lái)訪問(wèn)传睹，我看完后頓時(shí)恍然大悟
這個(gè)需求是一個(gè)朋友問(wèn)的我耳幢，有點(diǎn)掛不住老臉，居然沒(méi)解決欧啤，
匹配字符串無(wú)論大小寫高亮顯示
當(dāng)時(shí)寫的 toLocaleLowerCase 轉(zhuǎn)換大小寫睛藻， 但是這樣無(wú)疑會(huì)更改頁(yè)面原油的大寫字母，不算實(shí)現(xiàn)需求邢隧，后經(jīng)妹子委托她‘男友’ 我同學(xué)修档，寫出另一種方法，問(wèn)題得以解決府框，哈哈
function bind(input, text) {
/**
@param {Object} 綁定的input框
@param {text} 綁定的字段
*/
let oldHtml = text.html()
input.bind('input propertychange', function(a){
let inpVal = a.target.value;
let texts = oldHtml;
if (inpVal) {
let allVal = oldHtml.match(new RegExp(inpVal, 'ig'));
if (allVal) {
for (var j = 0; j < allVal.length; j ++) {
texts = texts.replace(allVal[j], '[*' + j + '*]');
// console.log(allVal[j],'[*' + j + '*]',texts)
}
for (var i = 0; i < allVal.length; i ++) {
texts = texts.replace('[*' + i + '*]', '<span class="highlight">' + allVal[i] + '</span>');
}
}
}
text.html(texts);
});
}
bind($('#input'), $('#div'))
這家伙是真滴6吱窝，我都沒(méi)想到這種方法，慚愧慚愧迫靖，當(dāng)時(shí)我想的是先把匹配的到的保存在變量院峡，然后逐一賦值給texts，雙層for循環(huán)太對(duì)了系宜，
還有一種不知可行不可行照激，實(shí)現(xiàn)到一半，看到這種想到最上面的方法盹牧，果斷棄之俩垃。（使用indexOf查找下標(biāo)，whie循環(huán)全字段保存下標(biāo)汰寓，然后循環(huán)數(shù)組下標(biāo)值口柳，使用splice前后加標(biāo)簽，包裹有滑，不過(guò)跃闹，splice會(huì)改變?cè)袛?shù)組，廢了半天勁 無(wú)用功毛好，這特么的就是我想到方法Ｍ铡！）
老子想靜靜肌访。
以上兩種方法都不失為好的解決辦法找默，多寫多想，加油加油吼驶！努力
