文字の背景に色を付ける．ハイライトを追加してみました．#即興コード．
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,
ReactNativeのボタンがiosとAndroidでは挙動が違うので代替。
2021.11.18
今日はReactNative（リアクトネイティブ）でアプリを制作しながら勉強している中で、ボタンを使ってみたら・・・iosとAndroidでは挙動というか見栄えが違うのですよ、ドキュメントにもそう書いていた?。なので、ボタンじゃなくてこちらを使用するほうが良さげです。
Color of the text (iOS), or background color of the button (Android).こちら【TouchableOpacity】などを使用してボタンを作成しないといけないみたい。こちらで作るとios、Android同じ見栄え（デザイン）になります。作ってて思うことは師というかメンターがいればもっと効率的に開発できそうです。
師匠がほしい今日此頃・・・。
以上、現場からでした。
import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
const App = () => {
const [count, setCount] = useState(0);
const onPress = () => setCount(prevCount => prevCount + 1);
return (
<View style={styles.container}>
<View style={styles.countContainer}>
<Text>Count: {count}</Text>
</View>
<TouchableOpacity
style={styles.button}
onPress={onPress}
>
<Text>Press Here</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingHorizontal: 10
},
button: {
alignItems: "center",
backgroundColor: "#DDDDDD",
padding: 10
},
countContainer: {
alignItems: "center",
padding: 10
}
});
export default App;
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
Android, background, button, color, from, import, iOS, of, OR, quot, react, ReactNative, Text, The, TouchableOpacity, useState, アプリ, こちら, こと, デザイン, ドキュメント, ネイティブ, ボタン, メンター, リアクト, 中, 今日, 今日此頃, 代替, 作成, 使用, 制作, 勉強, 師, 師匠, 挙動, 現場, 見栄え, 開発,