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

Prop `className` did not match in next js app

I have written a sample code ( Github Link here ). this is a simple next js app, but giving me error when I refresh the page. This seems to be the common problem and I tried the fix provided in the internet but does not seem to fix my issue. The error is Warning: Prop className did not match. Server: "MuiBox-root MuiBox-root-1" Client: "MuiBox-root MuiBox-root-2". Did changes for _document.js, modified _app.js as mentioned in official website and solutions in stackoverflow. but nothing seems to work. Could someone take a look and help me whats wrong with the code? Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW
Post a Comment
Read more

How to show number of registered users in Laravel based on usertype?

i'm trying to display data from the database in the admin dashboard i used this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count(); echo $users; ?> and i have successfully get the correct data from the database but what if i want to display a specific data for example in this user table there is "usertype" that specify if the user is normal user or admin i want to user the same code above but to display a specific usertype i tried this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count()->WHERE usertype =admin; echo $users; ?> but it didn't work, what am i doing wrong? source https://stackoverflow.com/questions/68199726/how-to-show-number-of-registered-users-in-laravel-based-on-usertype
Post a Comment
Read more

Why is my reports service not connecting?

I am trying to pull some data from a Postgres database using Node.js and node-postures but I can't figure out why my service isn't connecting. my routes/index.js file: const express = require('express'); const router = express.Router(); const ordersCountController = require('../controllers/ordersCountController'); const ordersController = require('../controllers/ordersController'); const weeklyReportsController = require('../controllers/weeklyReportsController'); router.get('/orders_count', ordersCountController); router.get('/orders', ordersController); router.get('/weekly_reports', weeklyReportsController); module.exports = router; My controllers/weeklyReportsController.js file: const weeklyReportsService = require('../services/weeklyReportsService'); const weeklyReportsController = async (req, res) => { try { const data = await weeklyReportsService; res.json({data}) console
Post a Comment
Read more