文字の背景に色を付ける．ハイライトを追加してみました．#即興コード．
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,
投稿された内容を検索してNGワードがある行を削除するMYSQL文
2022.07.28
おはよう御座います。ココの所、寝不足気味でしたが昨日はかなり早めから睡眠を取り今は快適です😌。
さて、投稿された内容を検索してNGワードがある行を削除するMYSQL文を作りましたので昨日、Qiitaで公開しました。反響はまぁまぁです、とは言えいいね等は今のところされていません。公開したMYSQL文をこちらでも公開しておきますのでご自由にお使いいただけと思っております。
DELETE T FROM Test AS T inner join
(select id from Test,words where txt REGEXP CONCAT ("(",word,")") GROUP BY id Order by id DESC)
AS NG ON T.id = NG.id WHERE T.id = NG.id;
作った経緯は自分が作ったサービスに荒らしがたまに現れるようになった事です、それをいちいち確認して削除するのは面倒なので、こういうSQL文を作成したわけです、若干、処理は遅いものの削除してくれるので良いかなって思っています。
本音を言えばQiitaに掲載すれば手直ししてくれる人が現れるかなって若干期待していましたが、今のところいません。もしこの記事を読んでもっと良い方法があるという方は是非、コメント等頂ければ幸いです。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
AS NG, DELETE T FROM Test AS T inner join, ID, MYSQL文, NG.id WHERE, NGワード, ON T.id, qiita, quot, REGEXP CONCAT, select id from Test, SQL文, where txt, Word, words, ココ, 反響, 本音, 睡眠, 経緯, 若干,