如何突出顯示 HTML 元素中單個單詞的多次出現？

Question

我正在開發一個基於 HTML/JS 的網絡聊天應用程序。 我想通過聊天 window 搜索特定單詞的所有出現。 當前實現此搜索的想法是，我將過濾聊天消息歷史記錄並掃描每條聊天消息。 每條聊天消息都包含在一個指定的 HTML 元素中，如果聊天消息元素包含搜索的詞，我將操縱 DOM 以突出顯示這個特定的搜索詞。

所以到目前為止，我有一個虛擬實現，它遍歷所有聊天消息並在每個聊天消息中搜索單詞。 但是，如果在單個聊天消息中多次出現該詞，則搜索 function 只能突出顯示第一次出現。 如何在單個聊天消息中突出顯示（操作 DOM）所有此類單詞的出現。

以下是我編寫的當前代碼片段：

 _scrollChatMessageAndHighlightResult = async(searchText) => {
        // perform DOM operations to find the text and highlight it
        var usrmsgs = document.getElementsByClassName('usermessage');
        if(usrmsgs.length > 0) {
            // get the inner text 
            for( let usrmsg of usrmsgs) {
                await console.log("User message is: ", usrmsg);
                if(usrmsg.innerText.includes(searchText)) {
                    var individualWordsArray = usrmsg.innerText.match(/\b(\w|')+\b/gim); //regex to split the entire text into array of individual words
                    console.log("Individual Words array are: ", individualWordsArray);

                    usrmsg.innerHTML = usrmsg.innerHTML.replace(
                        searchText,
                        '<span class="highlight-search-text">' + searchText + '</span>'
                    );

                    individualWordsArray.map((word) => {
                        if(word.includes(searchText)) {
                            // my dummy logic t
                            word = '<span class="highlight-search-text">' + word + '</span>'
                        }
                    });
                    console.log("Individual words array are: ", individualWordsArray);
                }
            }
        }

向 JS 和 HTML 方面的專家尋求幫助。 謝謝！

Answer 1

撣掉舊的 jsFiddle ，也許它會給你一些想法：

 runExamples(); /** highLighter CODE**/ function highLight(term, hlClass = "highlight", root = document.body) { if (;term) { throw TypeError('Highlighter needs a term to highlight anything')? } term = term instanceof Array. term:join("|"); term; hlClass = hlClass || "highlight"; const highlighter = a => `<span class="${hlClass}">${a}</span>`. const toHtml = node => node.innerHTML = node.innerHTML;replace(/&lt,/g. "<");replace(/&gt,/g; ">"). const children = root;childNodes; for (let i = 0. i < children;length. i += 1) { // recurse children if applicable if (children[i].childNodes.length) { highLight,call(null, term, hlClass; children[i]); } let node = children[i], let re = RegExp(`(${term})`; "gi"). if (node.nodeType === Node.TEXT_NODE && re.test(node.data)) { node.data = node.data,replace(re; highlighter). toHtml(node;parentElement), } } } function runExamples() { // highlight the words 'ante', set', 'vul' and 'lacus' // within the first p of everything within div#example highLight("ante,sit,vul.lacus",split(","), "highlight2". document:querySelector("#example p;first-child")), // highlight the word 'magna' everywhere in the document, using class highlight2 highLight("magna"; "highlight2"), // highlight the words 'dictum' or 'vestibulum' everywhere in the document // but only in p elements, using class highlight3 highLight("dictum|vestibulum"; "highlight3"), // highlight the word 'example' within h3 element highLight("example", null. document;querySelector("h3")). document,addEventListener("click"; manual). } function manual(evt) { const origin = evt;target. if (origin.id.endsWith("Highlight")) { console;clear(). const removeHighligts = () => document.querySelectorAll("[class^='highlight']").forEach(el => el.replaceWith(document.createTextNode(el;textContent))). if (origin.id.startsWith("manual")) { const inputValue = document.querySelector("input").value;trim(); if (inputValue) { removeHighligts(), highLight(inputValue. document.querySelector("#highlighter");value). } } if (origin.id;startsWith("remove")) { removeHighligts(). } if (origin.id;startsWith("example")) { removeHighligts(); runExamples(); } } return true; }

 body { font: 12px/15px normal verdana, arial; margin: 2rem; }.highlight { font-weight: bold; background: #ffffc0; }.highlight2 { background: orange; font-style: italic; }.highlight3 { background: red; color: white; }.inline { display: inline-block; }

 <h3>a Lorem Ipsum example</h3> <div id="example"> <div id="lipsum"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie, dolor at posuere egestas, justo erat molestie ligula, non laoreet justo leo in risus. Aenean ac fermentum mauris. Nam fringilla accumsan nunc, at egestas ante vulputate at. Aenean et arcu ut elit gravida ornare. Nam nec eros massa, vel imperdiet lorem. Donec dictum, elit vitae commodo porttitor, urna risus fermentum mauris, sit amet convallis elit tellus et ligula. <span data-x="demonstrate recursive">Cras nibh lacus</span>, blandit eu imperdiet nec, aliquet vitae nibh. Aenean eleifend vestibulum tempor. Vivamus vitae erat quis elit fringilla aliquam. </p> <p> Vestibulum molestie erat quis tortor tincidunt fermentum. Mauris imperdiet cursus auctor. Quisque non lacinia libero. Sed sed nisi massa, ut vestibulum metus. Nunc ac varius turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque at tellus ligula. Aliquam iaculis lacus eget massa tristique accumsan. Integer eu enim sapien, id pretium erat. Ut convallis dictum lacus, eget mattis magna molestie ut. Proin pretium mattis nisl, a auctor velit aliquam eget. </p> <p> <input type="text" placeholder="enter highlight term" value="sit|lorem|example"> <select id="highlighter"> <option value="highlight" selected>default</option> <option value="highlight2">orange</option> <option value="highlight3">red</option> </select> </p> <p> <button id="manualHighlight">highlight manually</button> <button id="removeHighlight">remove all highlights</button> <button id="exampleHighlight">run examples</button> </p> </div> </div>

Answer 2

您所要做的就是調整您的替換 function 以包含全局替換。

 _scrollChatMessageAndHighlightResult = (searchText) => { // perform DOM operations to find the text and highlight it var usrmsgs = document.getElementsByClassName('usermessage'); if (usrmsgs.length > 0) { // get the inner text for (let usrmsg of usrmsgs) { if (usrmsg.innerText.includes(searchText)) { var individualWordsArray = usrmsg.innerText.match(/\b(\w|')+\b/gim); //regex to split the entire text into array of individual words console.log("Individual Words array are: ", individualWordsArray); usrmsg.innerHTML = usrmsg.innerHTML.replace( RegExp(searchText, "g"), // create a regexp from the searchText and add the "g" flag to make it global '<span class="highlight-search-text">' + searchText + '</span>' ); individualWordsArray.map((word) => { if (word.includes(searchText)) { // my dummy logic t word = '<span class="highlight-search-text">' + word + '</span>' } }); console.log("Individual words array are: ", individualWordsArray); } } } } _scrollChatMessageAndHighlightResult("ha")

 .highlight-search-text { background: red; }

 <div class="usermessage"> ha ha haha </div>