Skip to main content

To highlight all keywords on all elements. (Excluding input form and text area)

I created two types of patterns.

・【 pattern_1 】

window.addEventListener("load", (highlight) => {
    const str1 = ["browser", "Browser"];
    const str2 = ['extension', 'Extension', 'add-on', 'Add-on', 'Add-On','拡張機能'];
    const str3 = ['Edge', 'edge'];
    const str4 = ['Firefox', 'firefox'];
    const str5 = ['Chrome', 'chrome'];

    function handleTextNode(textNode) {
        const newSpan = document.createElement('span');
        const origText = textNode.textContent;

        if (textNode.nodeName !== '#text' ||
            textNode.parentNode.nodeName === 'TEXTAREA' ||
            textNode.parentNode.nodeName === 'FORM' ||
            textNode.parentNode.nodeName === 'OPTION' ||
            textNode.parentNode.nodeName === 'INPUT' ||
            textNode.parentNode.nodeName === 'SELECT' ||
            //     || textNode.parentNode.nodeType === 3
            //     || textNode.nodeName !== "#document"
                 textNode.parentNode.nodeName === 'SCRIPT' ||
            //     || textNode.parentNode.nodeName === 'STYLE'
            textNode.parentNode.nodeName === 'A'
            //     || textNode.parentNode.nodeName === 'P'
            //     || textNode.parentNode.nodeName === 'SPAN'
            //     || textNode.parentNode.nodeName === 'H1'
            //     || textNode.parentNode.nodeName === 'H2'
            //     || textNode.parentNode.nodeName === 'EM'
        ) {
            return;
        }
        //----- Keyword group 1 Processing content -----//
        for (let i = 0; i < str1.length; i++) {
            // Create class
            let newHtml_1 = origText.replaceAll(str1[i], "<span class='highlighted_1'>" + str1[i] + "</span>");
            if (newHtml_1 !== origText) {
                newSpan.innerHTML = newHtml_1;
                textNode.parentNode.replaceChild(newSpan, textNode);
            }
        }
        //----- Keyword group 2 Processing content -----//
        for (let j = 0; j < str2.length; j++) {
            // Create class
            let newHtml_2 = origText.replaceAll(str2[j], "<span class='highlighted_2'>" + str2[j] + "</span>");
            if (newHtml_2 !== origText) {
                newSpan.innerHTML = newHtml_2;
                textNode.parentNode.replaceChild(newSpan, textNode);
            }
        }
        //----- Keyword group 3 Processing content -----//
        for (let k = 0; k < str3.length; k++) {
            // Create class
            let newHtml_3 = origText.replaceAll(str3[k], "<span class='highlighted_3'>" + str3[k] + "</span>");

            if (newHtml_3 !== origText) {
                newSpan.innerHTML = newHtml_3;
                textNode.parentNode.replaceChild(newSpan, textNode);
            }
        }
        //----- Keyword group 4 Processing content -----//
        for (let m = 0; m < str4.length; m++) {
            // Create class
            let newHtml_4 = origText.replaceAll(str4[m], "<span class='highlighted_4'>" + str4[m] + "</span>");

            if (newHtml_4 !== origText) {
                newSpan.innerHTML = newHtml_4;
                textNode.parentNode.replaceChild(newSpan, textNode);
            }
        }
        //----- Keyword group 5 Processing content -----//
        for (let n = 0; n < str5.length; n++) {
            // Create class
            let newHtml_5 = origText.replaceAll(str5[n], "<span class='highlighted_5'>" + str5[n] + "</span>");

            if (newHtml_5 !== origText) {
                newSpan.innerHTML = newHtml_5;
                textNode.parentNode.replaceChild(newSpan, textNode);
            }
        }

    }

    let textNodes = [];
    let nodeIter = document.createNodeIterator(document.body, NodeFilter.SHOW_TEXT);
    let currentNode;
    while (currentNode = nodeIter.nextNode()) {
        textNodes.push(currentNode);
    }

    textNodes.forEach(function(el) {
        handleTextNode(el);
    });

});
.highlighted_1 {
  background-color: #cdf7e6; /*Pale green*/
  font-weight:unset;
}

.highlighted_2 {
  background-color: pink;
  font-weight:unset;
}

.highlighted_3 {
  background-color: #98bbeb; /*blue*/
  font-weight:unset;
}

.highlighted_4 {
  background-color: orange;
  font-weight:unset;
}

.highlighted_5 {
  background-color:#66f2cd; /*emerald*/
  font-weight:unset;
}
<p style="width:576px" class="yjSlinkDirectlink ClapLv1TextBlock_Chie-TextBlock__Text__1jsQC ClapLv1TextBlock_Chie-TextBlock__Text--medium__3nLu4 ClapLv1TextBlock_Chie-TextBlock__Text--SpaceOut__3kF8R ClapLv1TextBlock_Chie-TextBlock__Text--preLine__2SRma">Microsoft edge のお気に入り設定等について
Windows10になってからブラウザがinternet ExplorerからMicrosoft edgeに変更推奨されてますが、お気に入りの位置が横並びで使いづらいです。

internet Explorerの時の様に左側にお気に入りを縦並びで表示される方法を教えて下さい！

それともう一つ…

Microsoft edgeを開くと画像の様に「Yahoo Japan」が2つ立ち上がるのですが、設定がおかしいのでしょうか？

自分でもネットで調べたのですが出来なくて…

初心者でも分かりやすい様に、順序立てて教えて頂けるとありがたいです！

パソコンにお詳しい方のご教示お待ち致しております！</p>

・【 pattern_2 】

window.addEventListener("load", (highlight) => {
    // p, a, etc Elements can conflict with each other and may not be processed.
    const TEXT_ELE = document.querySelectorAll("em, b, h1, span, h2, p"); //a,
    // const TEXT_ELE_2= document.querySelector("a, em, p,");
    // document.evaluate("/html/body//text()", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
    const str1 = ["browser", "Browser"];
    const str2 = ['extension', 'Extension', 'add-on', 'Add-on', 'Add-On','拡張機能'];
    const str3 = ['Edge', 'edge'];
    const str4 = ['Firefox', 'firefox'];
    const str5 = ['Chrome', 'chrome'];

    // Excluded by Google Image Search
    let url = location.href;
    if (url.indexOf('&source=lnms&tbm=isch&sa=X&ved=') !== -1) return;
    if (url.indexOf('&tbm=isch&source=lnms&sa=X&ved=') !== -1) return;
    if (url.indexOf('&tbm=isch&ved=') !== -1) return;
    if (url.indexOf('&sclient=img&ei=') !== -1) return;

    //----- Keyword group 1 Processing content -----//
    const cssCheck1 = function(reg1, str1) {
        let count = 0;
        //TEXT_ELE.reduce((mark1) => {
        TEXT_ELE.forEach((mark1) => {
            //TEXT_ELE_2.forEach((mark1) => {
            const tag_txt_1 = mark1.innerHTML;
            if (tag_txt_1.match(str1)) {
                // Create class
                mark1.innerHTML = tag_txt_1.replace(str1, "<b class='highlighted_1'>" + str1 + "</b>");
                count++;
            }
        });
        //});
    };

    for (let j = 0; j < str1.length; j++) {
        const reg1 = new RegExp(str1[j], 'ig');
        cssCheck1(reg1, str1[j]);
    }

    //----- Keyword group 2 Processing content -----//
    const cssCheck2 = function(reg2, str2) {
        let count = 0;
        //TEXT_ELE.reduce((mark2) => {
        TEXT_ELE.forEach((mark2) => {
            const tag_txt_2 = mark2.innerHTML;
            if (tag_txt_2.match(str2)) {
                // Create class
                mark2.innerHTML = tag_txt_2.replace(str2, "<b class='highlighted_2'>" + str2 + "</b>");
                count++;
            }
        });
    };

    for (let j = 0; j < str2.length; j++) {
        const reg2 = new RegExp(str2[j], 'ig');
        cssCheck2(reg2, str2[j]);
    }

    //----- Keyword group 3 Processing content -----//
    const cssCheck3 = function(reg3, str3) {
        let count = 0;
        //TEXT_ELE.reduce((mark3) => {
        TEXT_ELE.forEach((mark3) => {
            const tag_txt_3 = mark3.innerHTML;
            if (tag_txt_3.match(str3)) {
                // Create class
                mark3.innerHTML = tag_txt_3.replace(str3, "<b class='highlighted_3'>" + str3 + "</b>");
                count++;
            }
        });
    };

    for (let j = 0; j < str3.length; j++) {
        const reg3 = new RegExp(str3[j], 'ig');
        cssCheck3(reg3, str3[j]);
    }

    //----- Keyword group 4 Processing content -----//
    const cssCheck4 = function(reg4, str4) {
        let count = 0;
        //TEXT_ELE.reduce((mark4) => {
        TEXT_ELE.forEach((mark4) => {
            const tag_txt_4 = mark4.innerHTML;
            if (tag_txt_4.match(str4)) {
                // Create class
                mark4.innerHTML = tag_txt_4.replace(str4, "<b class='highlighted_4'>" + str4 + "</b>");
                count++;
            }
        });
    };

    for (let j = 0; j < str4.length; j++) {
        const reg4 = new RegExp(str4[j], 'ig');
        cssCheck4(reg4, str4[j]);
    }

    //----- Keyword group 5 Processing content -----//
    const cssCheck5 = function(reg5, str5) {
        let count = 0;
        //TEXT_ELE.reduce((mark5) => {
        TEXT_ELE.forEach((mark5) => {
            const tag_txt_5 = mark5.innerHTML;
            if (tag_txt_5.match(str5)) {
                // Create class
                mark5.innerHTML = tag_txt_5.replace(str5, "<b class='highlighted_5'>" + str5 + "</b>");
                count++;
            }
        });
    };

    for (let j = 0; j < str5.length; j++) {
        const reg5 = new RegExp(str5[j], 'ig');
        cssCheck5(reg5, str5[j]);
    }

//    if (count === 0) {}
});
.highlighted_1 {
  background-color: #cdf7e6; /*Pale green*/
  font-weight:unset;
}

.highlighted_2 {
  background-color: pink;
  font-weight:unset;
}

.highlighted_3 {
  background-color: #98bbeb; /*blue*/
  font-weight:unset;
}

.highlighted_4 {
  background-color: orange;
  font-weight:unset;
}

.highlighted_5 {
  background-color:#66f2cd; /*emerald*/
  font-weight:unset;
}
<p style="width:576px" class="yjSlinkDirectlink ClapLv1TextBlock_Chie-TextBlock__Text__1jsQC ClapLv1TextBlock_Chie-TextBlock__Text--medium__3nLu4 ClapLv1TextBlock_Chie-TextBlock__Text--SpaceOut__3kF8R ClapLv1TextBlock_Chie-TextBlock__Text--preLine__2SRma">Microsoft edge のお気に入り設定等について
Windows10になってからブラウザがinternet ExplorerからMicrosoft edgeに変更推奨されてますが、お気に入りの位置が横並びで使いづらいです。

internet Explorerの時の様に左側にお気に入りを縦並びで表示される方法を教えて下さい！

それともう一つ…

Microsoft edgeを開くと画像の様に「Yahoo Japan」が2つ立ち上がるのですが、設定がおかしいのでしょうか？

自分でもネットで調べたのですが出来なくて…

初心者でも分かりやすい様に、順序立てて教えて頂けるとありがたいです！

パソコンにお詳しい方のご教示お待ち致しております！</p>

Regarding pattern 2, there is an anomaly that cannot be successfully migrated to some links.

Pattern 1 does not have the same problems as pattern 2 so far, so I think pattern 1 is ideal programming in comparison.

However, not all elements are highlighted in common with both Pattern 1 and Pattern 2.

(Excluding input form and text area) How should I write to emphasize every word of every element?

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW
Labels:

Comments

Post a Comment

Popular posts from this blog

How to split a rinex file if I need 24 hours data

Trying to divide rinex file using the command gfzrnx but getting this error. While doing that getting this error msg 'gfzrnx' is not recognized as an internal or external command Trying to split rinex file using the command gfzrnx. also install'gfzrnx'. my doubt is I need to run this program in 'gfzrnx' or in 'cmdprompt'. I am expecting a rinex file with 24 hrs or 1 day data.I Have 48 hrs data in RINEX format. Please help me to solve this issue. source https://stackoverflow.com/questions/75385367/how-to-split-a-rinex-file-if-i-need-24-hours-data
Post a Comment
Read more

ValueError: X has 10 features, but LinearRegression is expecting 1 features as input

So, I am trying to predict the model but its throwing error like it has 10 features but it expacts only 1. So I am confused can anyone help me with it? more importantly its not working for me when my friend runs it. It works perfectly fine dose anyone know the reason about it? cv = KFold(n_splits = 10) all_loss = [] for i in range(9): # 1st for loop over polynomial orders poly_order = i X_train = make_polynomial(x, poly_order) loss_at_order = [] # initiate a set to collect loss for CV for train_index, test_index in cv.split(X_train): print('TRAIN:', train_index, 'TEST:', test_index) X_train_cv, X_test_cv = X_train[train_index], X_test[test_index] t_train_cv, t_test_cv = t[train_index], t[test_index] reg.fit(X_train_cv, t_train_cv) loss_at_order.append(np.mean((t_test_cv - reg.predict(X_test_cv))**2)) # collect loss at fold all_loss.append(np.mean(loss_at_order)) # collect loss at order plt.plot(np.log(al...
Post a Comment
Read more

Sorting large arrays of big numeric stings

I was solving bigSorting() problem from hackerrank: Consider an array of numeric strings where each string is a positive number with anywhere from to digits. Sort the array's elements in non-decreasing, or ascending order of their integer values and return the sorted array. I know it works as follows: def bigSorting(unsorted): return sorted(unsorted, key=int) But I didnt guess this approach earlier. Initially I tried below: def bigSorting(unsorted): int_unsorted = [int(i) for i in unsorted] int_sorted = sorted(int_unsorted) return [str(i) for i in int_sorted] However, for some of the test cases, it was showing time limit exceeded. Why is it so? PS: I dont know exactly what those test cases were as hacker rank does not reveal all test cases. source https://stackoverflow.com/questions/73007397/sorting-large-arrays-of-big-numeric-stings
Post a Comment
Read more