おはようございます．文字の背景に色を付ける＝ハイライトを追加してみました．付けた結果、ちょっとごちゃごちゃしている感はありますが、文章の目を引くことになるのかなと思っています、ちなみにハイライトをつけようと思ったきっかけはこのサイトを見て思いました．
思ってから実行に移すのは「思い立ったが吉日」タイプなので直ぐに手を動かすして書きました．
それほど対したコードではないものの．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%);
}
明日へ続く．
