javascript 我有一个搜索栏，是搜索文本的段落，但因为它是更新的dom每一次，有一个滞后,有没有办法改进我的代码

3bygqnnd 于 2023-04-28 发布在 Java

关注(0)|答案(1)|浏览(115)

我循环浏览我的网络应用程序中的每一个段落，并搜索一个段落中的每一个单词。大约有2000个段落需要搜索。任何改进此代码的建议将不胜感激。

function searchBarFunction(){
    const wimesParagraph = document.querySelectorAll('.wimesParagraph');
    

    let textToSearch = searchBar.value
        textToSearch = textToSearch.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");
        let pattern = new RegExp(`${textToSearch}`,"gi");
        filterOn = 0;

   
    
    
        let textToSearch = searchBar.value
        textToSearch = textToSearch.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");
        let pattern = new RegExp(`${textToSearch}`,"gi");

            for(let i = 0; i < paragraph.children[0].children[4].children[0].childElementCount; i++){
                paragraph.children[0].children[4].children[0].children[i].innerHTML = paragraph.children[0].children[4].children[0].children[i].textContent.replace(pattern, match => {
                    paragraph.style.display = 'flex';
                    x = 1;
                    if(searchBar.value === ""){
                        paragraph.dataset.searched = "not-searched";
                    } else{
                        paragraph.dataset.searched = "searched";
                    }
                    
                    
                    if(filterOn === 1){
                        if(paragraph.dataset.filter === "no-filters"){
                            paragraph.style.display = 'none';
                            
                        }
                    }
                    return `<mark>${match}</mark>`;
                })
                
            }
        
    })
}

我试图将段落放在数组中，然后搜索文本，然后更新DOM一次，因为我认为是多次更新DOM导致了延迟

JavaScript

来源：https://stackoverflow.com/questions/76121505/i-have-a-search-bar-that-is-searching-text-in-paragraphs-but-as-it-is-updating-t

1条答案

按热度按时间

jhdbpxl91#

如果我是你，我的密码会是这样的

function searchBarFunction() {
  const paragraphs = document.getElementsByClassName('wimesParagraph');
  const searchText = searchBar.value
    .replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  const pattern = new RegExp(`${searchText}`, "gi");

  for (let i = 0; i < paragraphs.length; i++) {
    const paragraph = paragraphs[i];
    const children = paragraph.children[0].children[4].children[0];

    const hasMatch = searchForPatternInElement(pattern, children);
    updateParagraphDisplay(paragraph, hasMatch);

    if (filterOn === 1) {
      filterParagraphIfNeeded(paragraph);
    }
  }
}

function searchForPatternInElement(pattern, element) {
  let hasMatch = false;

  for (let i = 0; i < element.childElementCount; i++) {
    const child = element.children[i];
    const originalText = child.textContent;
    const markedText = originalText.replace(pattern, `<mark>${match}</mark>`);
    hasMatch |= (markedText !== originalText);
    child.innerHTML = markedText;
  }

  return hasMatch;
}

function updateParagraphDisplay(paragraph, hasMatch) {
  paragraph.style.display = hasMatch ? 'flex' : 'none';
  paragraph.dataset.searched = searchBar.value ? 'searched' : 'not-searched';
}

function filterParagraphIfNeeded(paragraph) {
  if (paragraph.dataset.filter === 'no-filters') {
    paragraph.style.display = 'none';
  }
}

赞(0）回复(0）举报 2023-04-28

我来回答

javascript 我有一个搜索栏，是搜索文本的段落，但因为它是更新的dom每一次，有一个滞后,有没有办法改进我的代码

1条答案

相关问题

热门标签

最新问答