文字の背景に色を付ける．ハイライトを追加してみました．#即興コード．
2024.10.22
おはようございます．文字の背景に色を付ける＝ハイライトを追加してみました．付けた結果、ちょっとごちゃごちゃしている感はありますが、文章の目を引くことになるのかなと思っています、ちなみにハイライトをつけようと思ったきっかけはこのサイトを見て思いました．
思ってから実行に移すのは「思い立ったが吉日」タイプなので直ぐに手を動かすして書きました．
それほど対したコードではないものの．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
タグ
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で背景色を変更するコードです。保持機能あり。
2022.07.22
こんにちは、JavaScriptで背景色を変更するコード＋保持機能ありのコードを記載しますね。カラー色の保管はCookieを使用して対応しています。もう少しソースコードを短く出来るような気がしますが、お昼から出かけるのでこれで一旦終了とさせて頂きます。
let htmlcode = ["#181B39","#262a2e","#192734","#1c483b","#bf7800","#83094f"].map(elm =>`<span class='color_code' style='color:${elm}' data-color-code='${elm}'>■</span>`).join("\n");
const basecolor = "#262a2e";
let cookiefn = function (val) {
let CodeColor = val;
let r = document.cookie.split(';');
return r?((r)=>{
for(let ii = 0 ;ii<r.length;ii++){
let content = r[ii].split('=');
for(let i = 0 ;i<content.length;i++){
if(content[i].replaceAll(" ","")==="bgcolor_code"){
CodeColor = content[i +1];
}
}
}
return CodeColor;
})(r):CodeColor;
};
let old_color = cookiefn(basecolor);
console.log("log=" + old_color);
document.getElementById("site_description").insertAdjacentHTML("afterend", htmlcode);
let ColorCodeObject = document.querySelectorAll(".color_code");
for (const key in ColorCodeObject) {
if (Object.hasOwnProperty.call(ColorCodeObject, key)) {
const element = ColorCodeObject[key];
element.addEventListener("click", function (element) {
for (let ii = 0; ii < document.styleSheets.length; ii++) {
if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {
for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
let element_css_code = document.styleSheets[ii].cssRules[i];
let rgbfn = function (hex) {
let red = parseInt(hex[1] + hex[2], 16);
let green = parseInt(hex[3] + hex[4], 16);
let blue = parseInt(hex[5] + hex[6], 16);
return `rgb(${red},${green},${blue})`;
};
try {
if (element_css_code.style.backgroundColor.replaceAll(" ","") === rgbfn(old_color).replaceAll(" ","")) {
console.log(rgbfn(old_color));
element_css_code.style.backgroundColor = rgbfn(ColorCodeObject[key].getAttribute("data-color-code"));
}
} catch (error) {
//console.log("not backgroundColor");
}
}
old_color = ColorCodeObject[key].getAttribute("data-color-code");
document.cookie = "bgcolor_code=" + old_color;
}
}
});
}
}
(function(){
for (let ii = 0; ii < document.styleSheets.length; ii++) {
if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {
for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
let element_css_code = document.styleSheets[ii].cssRules[i];
let rgbfn = function (hex) {
let red = parseInt(hex[1] + hex[2], 16);
let green = parseInt(hex[3] + hex[4], 16);
let blue = parseInt(hex[5] + hex[6], 16);
return `rgb( ${red}, ${green}, ${blue})`;
};
try {
console.warn(element_css_code.style.backgroundColor.replaceAll(" ","") + " === " + rgbfn(old_color).replaceAll(" ",""));
if (element_css_code.style.backgroundColor.replaceAll(" ","") === rgbfn(basecolor).replaceAll(" ","")) {
element_css_code.style.backgroundColor = rgbfn(old_color);
}
} catch (error) {
//console.log("not backgroundColor");
}
}
document.cookie = "bgcolor_code=" + old_color;
}
}
})();あとソースコードとは関係ありませんが、今日は４４度を超える県が出てくると人工知能が予測したそうです、４４度って凄まじく暑いと思いますので熱中症対策はしっかりとしてくださいね。
尚、このコードを可変してご自由に使用して構いませんが、出来ればお声掛けして頂けると嬉しいです。また、この記事のシェア、いいね等よろしくお願いします。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
backgroundColor.replaceAll, basecolor, catch, CodeColor, ColorCodeObject, cookiefn, document.getElementById, element, elm, hex, htmlcode, insertAdjacentHTML, join, match, parseInt, querySelectorAll, replaceAll, RGB, styleSheets, val,
タイトルの下に背景色を変える■を追加しました。
2022.07.22
おはようございます、背景色を変える■を追加しました。四角をクリックすると背景色が変わります、ソースコードは下記になります。取り分けて難しくないソースコードになると思いますが、少しだけ解説をします。このソースコードはスタイルシートの記述（ファイルなど）を読み込んでバックグラウンドカラーの一部のカラーだけを任意のカラーに置き換えています。
let htmlcode = `
<span class='color_code' style='color:#262a2e' data-color-code='#262a2e'>■</span>
<span class='color_code' style='color:#192734' data-color-code='#192734'>■</span>
<span class='color_code' style='color:#1c483b' data-color-code='#1c483b'>■</span>
<span class='color_code' style='color:#bf7800' data-color-code='#bf7800'>■</span>
<span class='color_code' style='color:#83094f' data-color-code='#83094f'>■</span>
`;
let old_color = "#262a2e";
document.getElementById("site_description").insertAdjacentHTML("afterend", htmlcode);
let ColorCodeObject = document.querySelectorAll(".color_code");
for (const key in ColorCodeObject) {
if (Object.hasOwnProperty.call(ColorCodeObject, key)) {
const element = ColorCodeObject[key];
element.addEventListener("click", function (element) {
for (let ii = 0; ii < document.styleSheets.length; ii++) {
if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {
for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
let element_css_code = document.styleSheets[ii].cssRules[i];
let rgbfn = function(hex){
let red = parseInt(hex[1]+hex[2],16);
let green = parseInt(hex[3]+hex[4],16);
let blue = parseInt(hex[5]+hex[6],16);
return `rgb(${red}, ${green}, ${blue})`;
};
try {
if (element_css_code.style.backgroundColor === rgbfn(old_color)) {
//console.log(rgbfn(old_color));
element_css_code.style.backgroundColor = rgbfn(ColorCodeObject[key].getAttribute("data-color-code"));
}
} catch (error) {
//console.log("not backgroundColor");
}
}
old_color = ColorCodeObject[key].getAttribute("data-color-code");
}
}
});
}
}ソースコードも上から下へ進む感じで読んでいただけたら、読めるはずです。尚、躓く箇所といえば１６進数でスタイルシートに記述しているものもRGBで格納されている所ですね。ここの比較が「えっ」って感じになるぐらいでしょうか。あとはそれ程、難しくないソースコードだと自負しております😌。
この頃、jqueryを触らなくなって悲しいかな仕様を半分ぐらい忘れております。やはりコードは毎日書くべきかなって思います。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
backgroundColor, catch, ColorCodeObject, cssRules, document.getElementById, element, getAttribute, hex, htmlcode, Ii, insertAdjacentHTML, jquery, match, parseInt, querySelectorAll, quot, RGB, rgbfn, string, styleSheets,
Anglesharpというライブラリの話。
2021.03.13
久しぶりに技術的なお話の記事を書きます。AnglesharpというのはC#などでスクレイピングするときにスクレイピングを補助してくれるライブラリで結構人気のあるライブラリなるようです。スクレイピングするコードは下記のようになります。この書き方が至ってシンプルで書きやすいのではないかなと思っています。
var Url = $"https://zip358.com/";
var querySelector = $"#index_post_list > li.clearfix.num1.type1 > div > h3";
var document = BrowsingContext.New(Configuration.Default.WithDefaultLoader()).OpenAsync(Url).Result;
var element = document.QuerySelector(querySelector);
Console.WriteLine($"blogtitle is {element.InnerHtml}");このライブラリはとても良いのですが、一つ問題があります。スクレイピングするのですが・・・これjavascriptがOFFの状態でスクレイピングされるのですね。どうもこのコードではJSがONにはならないようですね。因みに自分はそのことを知っていなかったのでどハマリしました。大手の検索サイトなどはjavascriptがOFFの状態でも閲覧できるようになっている事を知りました、試しにブラウザをOFFの状態にしてみるとソースコードがかなり違っていてJSのONの状態とは情報が差異がある事が理解できると思います。
Anglesharpのコンフィグ設定（init）でエージェントなどを設定してあげると上手くJSがONの状態をスクレイピングすることが可能なのかもしれません。動画を見る限りではまだかもしれません・・・。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
１, ３, 358, anglesharp, BrowsingContext, clearfix, com, Configuration, default, div, document, element, gt, https, index, li, LIST, new, num, OpenAsync, POST, QueryS, querySelector, quot, result, type, url, var, WithDefaultLoader, zip, お話, コード, シンプル, スク, とき, ピング, ライブラリ, レイ, 下記, 久しぶり, 人気, 書き方, 補助, 記事, 話,