memo textChanger js

jQueryでつくったものすごく単純な名前変換機能

上記記事からjQueryを抜いて、ちょっと機能を足した版です。

所謂夢界隈に足を踏み入れたことがないエアプ人間なので(本当にごめんなさい)使用感はわかりませんが、多分そこそこ便利……？なのではないでしょうか。

また、当ページは上記記事と差し替え予定の為、URLでの共有を推奨しません。

source code

demo

設定中：見本例子

私の名前はだ。　名前については設定でどうとでも変わる為、ここでは省略する。
現在、見本テキストとしての役目を全うしているところだ。

HTML


        
	<div>
	  <input type="text" data-text="姓" />
	  <input type="text" data-text="名" />
	  <input type="submit" id="changeSet" value="SET" />
	  <input type="submit" id="changeClr" value="CLEAR" />
	</div>
	<p>設定中：見本 例子</p>
	<p class="sample-txt">私の名前は<span data-text="姓"></span><span data-text="名"></span>だ。　名前については設定でどうとでも変わる為、ここでは省略する。<br />現在、<span class="no-change">見本</span>テキストとしての役目を全うしているところだ。</p>

灰色の文字色部分は無視して構いません。
処理に使用している要素もHTMLのルールに則っていれば他にどんな属性を足しても問題ありません。

設定フォーム

入力欄

例：

input要素にdata-text="key"属性を付与してください。

keyに対応した入力欄として扱われます。
同一のkeyに対応したinput要素が複数ある状態で設定ボタンを押した場合、一番最後の入力欄の内容が採用されます。
type属性値は何でも構いませんが、上記の理由とチェック有無を確認する処理は挟んでいない為、radio,checkbox等複数設置する前提のものは推奨しません。(需要があれば対応策を出します)

決定ボタン

例：

お好きな要素にid="changeSet"属性を付与してください。

初期化ボタン

例：

お好きな要素にid="changeClr"属性を付与してください。

テキスト部分

置き換え対象テキスト

例：見本例子部分

特にHTMLによるマークアップは不要で、default部分を閲覧者が設定したテキストと置き換えます。

置き換え拒否

例：

お好きな要素にno-changeクラスを持たせてください。

要素内に置き換え対象テキストがあっても無視します。

HTMLでマークアップ

例：

input以外の要素にdata-text="key"属性を付与してください。

内部テキストをkeyに対応したテキストと入れ替えます。
置き換え対象テキストの探索範囲外にあってもHTMLでマークアップされている場合、置き換え対象になります。

JavaScript


        
	<script src="//cdn.jsdelivr.net/gh/nn-3/text-changer/main.min.js"></script>
	<script>
	textChanger({
		'姓': '見本',
		'名': '例子'
	});
	</script>

関数について

で読み込めるようにしています。

変換設定

例：

textChanger({});の{}間に'key':'default'を,区切りで必要数記述してください。

その他設定

後述、関数 textChanger について　を参照してください。

関数 textChanger について

関数

JavaScript


        
	function textChanger(dflt,opt) {
	
	let on = 'addEventListener';
	let $d = document;
	let $id = id => (id instanceof HTMLElement)?id:$d.getElementById(id);
	let tc = textChanger;
	
	let set = Object.assign({
		setBtnId: 'changeSet',
		clrBtnId: 'changeClr',
		areaId: null,
		btnEvent: null,
		storage: 'session',
		path: 'textChanger',
		attr: 'data-text',
		word: 'default'
	},opt||{});
	let keys = Object.keys(dflt);
	let data = Object.create(dflt);
	let storage, sF = set.storage!==null;
	if(sF) {
		storage = window[set.storage+'Storage']||window.sessionStorage;
		data = Object.assign(data,JSON.parse(storage.getItem(set.path))||{});
	}
	function setting(){
		let $area = $id(set.areaId)||$d.body;
		let $set = $id(set.setBtnId);
		let $clr = $id(set.clrBtnId);
		let $list = {};
		let bET = typeof set.btnEvent;
		let bF = !!$set||!!$clr;
		let iF = false;
		let lF = bF && (bET=='function'||!sF);
		let nF = Array.isArray(tc.nodes);
		for(let k of keys){
			$list[k] = {};
			if(lF) $list[k].node = [];
		}
		$d.querySelectorAll('['+set.attr+']').forEach($e=>{
			let k = $e.getAttribute(set.attr);
			if(keys.indexOf(k)<0) return;
			if($e.tagName=='INPUT'){
				if(!bF) return;
				$e.value = data[k];
				$list[k].input = $e;
				iF = true;
			} else {
				$e.textContent = data[k];
				if(lF) $list[k].node.push($e.childNodes[0]);
				if(nF) tc.nodes.push($e.childNodes[0]);
			}
		});
		if(!!set.word) {
			let t = set.word.match(/key|default/);
			if(t){
				let regEsc = str => str.replace(/[\-\/\|^$*+?.(){}\[\]]/g,'\x5c$&');
				let wP = (e,k) => {w[e]=k;reg+=(reg.length?'|':'')+regEsc(e)};
				let w={},reg='';
				let rTN, rTNs = $elm =>{
					let ns = Array.from($elm.childNodes);
					for(let n of ns){
						if(n.nodeType==1&&!n.matches('script,['+set.attr+'],.no-change')) rTNs(n);
						else if(n.nodeType==3) rTN(n);
					}
				}
				if(t[0]=='key') for(let k of keys) wP(k,k);
				else for(let k of keys) wP(dflt[k],k);
				reg = regEsc(set.word).replace(t[0],'('+reg+')');
				if(lF||nF) {
					reg = RegExp(reg);
					rTN = n =>{
						if(nF&&tc.nodes.includes(n)) return;
						let m = n.nodeValue.match(reg);
						if(!!m){
							let l = m.index+m[0].length;
							if(m.input.length!=l) rTN(n.splitText(l));
							let nn = !m.index?n:n.splitText(m.index);
							if(lF) $list[w[m[1]]].node.push(nn);
							if(nF) tc.nodes.push(nn);
							nn.nodeValue = data[w[m[1]]];
						}
					}
				} else {
					reg = RegExp(reg,'g');
					let rep = (s,k) => data[w[k]]||s;
					rTN = n => n.nodeValue = n.nodeValue.replace(reg,rep);
				}
				rTNs($area);
			}
		}
		if(iF&&bF){
			let iEach = fnc =>{
				for(let k of keys) if(!!$list[k].input) fnc(k,$list[k].input);
			}
			let sSet = sF?()=>{
				if(Object.keys(data).length) storage.setItem(set.path,JSON.stringify(data));
				else storage.removeItem(set.path);
			}:()=>{};
			let bEv = lF?(type,obj)=>{
				iEach((k,$i)=>{
					$i.value = obj[k];
					$list[k].node.forEach(n=>n.nodeValue=obj[k]);
				});
				if(bET=='function') set.btnEvent(type,data,dflt);
			}:bET=='string'?()=>{location.href=set.btnEvent}:()=>{location.reload()};
			if(!!$set) {
				$set[on]('click',()=>{
					iEach((k,$i)=>data[k]=$i.value);
					sSet();
					bEv('set',data);
				});
			};
			if(!!$clr) {
				$clr[on]('click',()=>{
					iEach(k=>delete data[k]);
					sSet();
					bEv('clr',dflt);
				});
			}
		}
	}
	
	if($d.readyState=='loading') $d[on]('DOMContentLoaded',setting);
	else setting();
	
	}

下記URLでCDNサーバーから読み込めるようにしてもらっています。　サービス可動状況について当サイトは関与できないので、自前で全て管理したい方は上記でJavaScriptファイルを作成し、読み込ませてください。

呼び出し

textChanger(変換設定,その他設定)

引数の変換設定その他設定は双方連想配列を持たせてください。

その他設定

JavaScript


        
	textChanger({
		'姓': '見本',
		'名': '例子'
	},{
		setBtnId: 'changeSet', // フォームの決定ボタンid
		clrBtnId: 'changeClr', // フォームの初期化ボタンid
		btnEvent: null, // 上記ボタンを押した際に呼び出すイベント
		areaId: null, // 置き換え対象テキストの探索範囲のid
		storage: 'session', // ストレージの選択
		path: 'textChanger', // ストレージ保存に使うパス
		attr: 'data-text', // HTML側で使う属性名
		word: 'default' // 置き換え対象テキスト
	});

第二引数に持たせた連想配列で、変換に関する設定を指定できます。
初期値から変更したい項目のみを指定してください。
全項目初期値のままでいい場合、第二引数自体を省略できます。
上記は初期設定の再指定なので言ってしまえば完全に無駄です。

`setBtnId` フォームの決定ボタンid

初期値: 'changeSet'
値: 文字列

HTML側のidを他に変更したい場合に指定してください。

`clrBtnId` フォームの初期化ボタンid

初期値: 'changeClr'
値: 文字列

HTML側のidを他に変更したい場合に指定してください。

`btnEvent` 上記ボタンを押した際に呼び出すイベント

初期値

null

値

下記いずれか

null: ページ再読込
文字列: 文字列をパスとするページへ遷移
関数: 関数呼び出し、ページの再読込,遷移は無し

`areaId` 置き換え対象テキストの探索範囲

初期値

null

値

下記いずれか

null: body要素内を探索
文字列: 文字列をidとする要素内を探索

HTML要素でマークアップしていなくても置き換えられるテキストの探索範囲を指定できます。

指定しておいた方が探索範囲が限定されるので処理の高速化が見込めます。

`storage` ストレージの選択

初期値

'session'

値

下記いずれか

'session': セッションストレージを選択
'local': ローカルストレージを選択
null: ストレージ使用無し(入力内容の反映はそのページのみ、再読込含むページ移動後は保持無し/btnEventの値に関係なくそのページに留まる)

`path` ストレージ保存に使うパス

初期値: 'textChanger'
値: 文字列

`attr` HTML側で使う属性名

初期値: 'data-text'
値: 文字列(HTML属性名として問題のないもの)

入力欄や文字の置き換えを行うHTML要素に付与する属性名を設定できます。

ここで指定した属性を持つ要素内も置き換え対象テキストの探索範囲外になるので、その辺りも踏まえて変更してください。

基本的に本スクリプト専用の属性であると想定して処理させています。

`word` 置き換え対象テキスト

初期値

'default'

値

下記いずれか

null: マークアップ外のテキストを置き換えしない
文字列: keydefaultどちらかを含む

設定テキストと自動で置き換える文字列を設定できます。

文字列中のkeydefault部分はそれぞれ変換設定側で指定したkeydefaultの文字列と置き換えた上で探索します。

例

JavaScript


        
	textChanger({
		'姓': '見本',
		'名': '例子'
	},{
		word: '#key#'
	});

HTML上での置き換え対象テキスト：#姓##名#

上記から`'#key#'`部分を置き換えた場合の例

値	HTML上での置き換え対象テキスト
値	見本	例子
`'default'`	`見本`	`例子`
`'#key#'`	`#姓#`	`#名#`
`'「default」'`	`「見本」`	`「例子」`
`'[write:key]'`	`[write:姓]`	`[write:名]`
`'keydefault'`	`姓default`	`名default`
`'defaultkey'`	`見本key`	`例子key`

jQuery版と設定を同一にする

JavaScript


        
	textChanger({
		'名称1': 'デフォ１',
		'名称2': 'デフォ２'
	},{
		word: '#key#',
		path: 'textchanger',
		btnEvent: ()=>{}
	});

関数呼び出し部分を上記にすることで、jQuery版との互換性を持たせられます。

jQueryでつくったものすごく単純な名前変換機能

source code

demo

demo

HTML

HTML

設定フォーム

入力欄

決定ボタン

初期化ボタン

テキスト部分

置き換え対象テキスト

置き換え拒否

HTMLでマークアップ

JavaScript

JavaScript

関数について

変換設定

その他設定

関数 textChanger について

関数

JavaScript

呼び出し

その他設定

JavaScript

setBtnId フォームの決定ボタンid

clrBtnId フォームの初期化ボタンid

btnEvent 上記ボタンを押した際に呼び出すイベント

areaId 置き換え対象テキストの探索範囲

storage ストレージの選択

path ストレージ保存に使うパス

attr HTML側で使う属性名

word 置き換え対象テキスト

JavaScript

上記から'#key#'部分を置き換えた場合の例

jQuery版と設定を同一にする

JavaScript

`setBtnId` フォームの決定ボタンid

`clrBtnId` フォームの初期化ボタンid

`btnEvent` 上記ボタンを押した際に呼び出すイベント

`areaId` 置き換え対象テキストの探索範囲

`storage` ストレージの選択

`path` ストレージ保存に使うパス

`attr` HTML側で使う属性名

`word` 置き換え対象テキスト

上記から`'#key#'`部分を置き換えた場合の例