JavaScriptで禁止ワードチェック

らら
らら

はじめに

MovableTypeのCheckReleaseで使用している場合、禁止ワードなどあった場合、申請をだせないように・・

って話で、メーカーに要望は、出したのですが・・・

つくってみる・・

きっと、いつになるかわからないし・・・

下記みたいのをつくってみた・・・

<script>
var Words = [
'NGワード',
'禁止用語',
];
	var result	= $("目的の要素").html();
	Words.push('\\d{1,4}\/\\d{1,2}\/\\d{1,2}');
	Words.push('\\d{1,4}年\\d{1,2}月\\d{1,2}日');
	for (i = 0; i < Words.length; i++) {
		var ngword = Words[i];
		if(ngword) {
			var re = new RegExp(ngword , 'gi');
			var or = result.match(re);
			if(or != null) {
				if(or.length == 1) {
					result = result.replace(re, "<span style=\"background-color:#ff9;\">"+or+"</span>");
				} else {
					for (j = 0; j < or.length; j++) {
						result = result.replace(new RegExp(or[j], 'g'), "<span style=\"background-color:#ff9;\">"+or[j]+"</span>");
					}
				}
			}
		}
	}
	$("目的の要素").html(result);
</script>
HTML

失敗・・・

ああ！htmlタグ要素まで、置換されるのね・・・エレメントのテキストだけがええなぁ・・・

nodeでやるのか。。。めんどい・・・

Chromeのプラグインでもないか見てみたけど・・・****で置き換えるみたいのしかない・・ねぇ

jquery.mark.js

jquery.mark.jsっていうのを発見！！

指定したキーワードをマーカーしてくれるらしい！！

これだ！！

サイトはこちら・・

https://markjs.io/

書き換える・・

正規表現もしたいから・・・markRegExpを使う・・

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.js"></script>
<script>
var Words = [
'NGワード',
'禁止用語',
];
$(function () {
	var filter	= Words;
	var doc		= $("目的の要素").html();
	filter.push('\\d{1,4}\/\\d{1,2}\/\\d{1,2}');
	filter.push('\\d{1,4}年\\d{1,2}月\\d{1,2}日');
	var result = doc;
	for (i = 0; i < filter.length; i++) {
		var ngword = filter[i];
		if(ngword) {
			$('#result').markRegExp(new RegExp(ngword , 'gi'));
		}
	}
	$("目的の要素").html(result);
</script>
HTML

MovableTypeに組み込む・・・

MovableTypeのプレビュー時に、NGワードをマーカー表示する感じで・・・

ヘッダー部に下記を追加することで記事のプレビューだけ反映する感じで・・・

<mt:If name="entry_archive">
	<mt:If name="preview_template">
	<script src="<$mt:WebsiteURL encode_xml="1"$>common/js/ngcheck.js"></script>
	</mt:If>
</mt:If>
HTML

さいごに・・・

ほんとは・・・申請できないようにしたいけど・・・

つなぎで・・・

関連記事