文字の背景に色を付ける．ハイライトを追加してみました．#即興コード．

2024.10.22

Logging

おはようございます．文字の背景に色を付ける＝ハイライトを追加してみました．付けた結果、ちょっとごちゃごちゃしている感はありますが、文章の目を引くことになるのかなと思っています、ちなみにハイライトをつけようと思ったきっかけはこのサイトを見て思いました．

思ってから実行に移すのは「思い立ったが吉日」タイプなので直ぐに手を動かすして書きました．

それほど対したコードではないものの．WordPressの記事の文章内にタグを基にして今回のようにハイライトを付けたり太文字にと思っている人は一定数いると思ったので何かの参考にしてみてください．

ソースコードはバニラJS（javascript）とCSSになります．

if (maincontent = document.querySelectorAll('#main_content > p')) {
    let words = [...document.querySelectorAll('.zip358tag > a')].map((elm) => {
        return elm.textContent;
    });
    if (words.length) {
        [...maincontent].forEach((maincontentElm) => {
            words.forEach((word) => {
                const regexp = new RegExp(word, 'g');
                if (maincontentElm.querySelectorAll('a').length === 0 && maincontentElm.querySelectorAll('img').length === 0) {
                    maincontentElm.innerHTML = maincontentElm.innerHTML.replace(regexp, '<strong class="highlight">' + word + '</strong>');
                } else {
                    nodeReplace(maincontentElm, regexp, words, word);
                }
            });
        });
    }
}

function nodeReplace(elm, regexp, words, word) {
    let key = [];
    if (elm.querySelectorAll('a').length) {
        [...elm.querySelectorAll('a')].forEach((e) => {
            key.push(e.outerHTML);
        });
    }
    if (elm.querySelectorAll('img').length) {
        [...elm.querySelectorAll('img')].forEach((e) => {
            key.push(e.outerHTML);
        });
    }

    if (nodeElmJudge(word, key) === true) {
        elm.innerHTML = elm.innerHTML.replace(regexp, '<strong class="highlight">' + word + '</strong>');
    }
}

function nodeElmJudge(word, key) {

    let result = [];
    result.push(...key.map(element => {
        const regex = new RegExp(word, 'g');
        return regex.test(element);
    }));
    return result.every(e => e === false);
}

strong.highlight{
    background: linear-gradient(transparent 40%, #2ff6da 40%);
}

明日へ続く．

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2024年10月22 06:00日

タグ

background, document.querySelectorAll, element, elm, foreach, innerHTML, linear-gradient, lt, maincontent, maincontentElm, nodeElmJudge, nodeReplace, querySelectorAll, quot, RegExp, result.push, textContent, words, words.forEach, words.length,

【#javascript定番】日付のカウントダウンを行う

2024.07.14

Logging

おはようございます．日付のカウントダウンを行うJavaScript言語の定番プログラムコードを作りましたので公開します．昨今、生成AIを使用してこのぐらいのコードは生成出来るかと思っていたのですが、こんなコードでも手直しが必要になりました．

やはり今の生成AIは事細かい指示を出さないと上手く動かないような気がします．それはプログラミングじゃない事でもそんな感じなのかもしれません．

<h1 id="countdown" data-y="2025" data-m="07" data-d="11"></h1>
function countdown() {
    let Y = document.querySelector('#countdown').getAttribute('data-Y');
    let m = Math.floor(document.querySelector('#countdown').getAttribute('data-m')) -1;
    let d = document.querySelector('#countdown').getAttribute('data-d');
    let strCountDown = '';
    let nowDate = new Date();
    let countdownDate = new Date(Y,m,d,0,0,0);
    let distance = countdownDate.getTime() - nowDate.getTime();
    const day = Math.floor(distance / 1000 / 60 / 60 / 24);
    const hour = Math.floor(distance / 1000 / 60 / 60) % 24;
    const minute = Math.floor(distance / 1000 / 60) % 60;
    const second = Math.floor(distance / 1000) % 60;

    strCountDown = `${day}日 ${hour}:${minute}:${second}`;

    view(strCountDown);
}

setInterval(countdown, 1000);

function view(str) {
    document.querySelector('#countdown').textContent = str;
}

デモページはこちらになります．

https://zip358.com/tool/demo94

明日へ続く．

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2024年07月14 06:00日

タグ

countdown, countdownDate.getTime, data-y, distance, document.querySelector, floor, getAttribute, gt, hour, let, lt, minute, nowDate.getTime, querySelector, quot, second, setInterval, STR, strCountDown, textContent,

いいねボタンと悪いねボタンを実装予定。 #いいね👍

2023.04.07

Logging

おはようございます、週末の夜から休日を使用して、とあるサイトにいいねボタンと悪いねボタンを実装予定です。これにより、コミュニティが盛り上がることを少し期待しているけども、そんなに変わらないだろうなって思います。ですが作ろうと思っています(　･ิω･ิ)。

<button id="likeBtn">👍</button>
<button id="dislikeBtn">👎</button>

<p><span id="likeCount">0</span></p>

いいねの数カウントと悪いはカウントしないものを実装です、そうYOUTUBEと同じ外見的、仕様です、中身はガタガタな物なんですが・・・。外見だけでも合わせようと思います、同じ仕様にするのは、それが巨人が一番良いと結論付けたのだからそれには大いに意味があるだろうという理由から、そうするように決めました。

// カウンターの初期値を設定
let likeCount = 0;
let dislikeCount = 0;

// 「いいね」ボタンのクリックイベントを追加
document.getElementById("likeBtn").addEventListener("click", function() {
  likeCount++;
  document.getElementById("likeCount").textContent = likeCount;
});

因みに、今月から金曜日も仕事になりました、先月末まで４勤務だったので、少しばかりアレですが５勤の方がONとOFFの切り替えが出来てよいです。フルリモートなので、ONとOFFの切り替えが難しいでしょうという人もいると思いますが、息を吸うようにいつもコードを書いているので正直な所、難しい事ではないです。仕事の場合、注意をはらっているのですが…まだまだ抜けがあるのが現状です。それが嫌だなって思います。そこを直したいなって日々思っています。

トイウコトデ、日曜日には実装済みになっていると思います。

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2023年04月07 06:00日

タグ

addEventListener, button&gt, dislikeBtn&quot, function, getElementById, gt, let dislikeCount, likeCount, lt, quot;click&quot, quot;likeBtn&quot, quot;likeCount&quot, span&gt, textContent, youtube, クリックイベント, トイウコトデ, 外見, 設定 let, 追加 document.getElementById,