花里胡哨的文字高亮——让你一眼就吃到糖
Tillreetree 2023-4-13

灵感来自于代码编辑器的语法高亮。对介词、连词、代词、名词、形容词进行高亮。

<style>
	.highlight-preposition { color: var(--purple,var(--blue)); }
	.highlight-conjunction { color: var(--pink,var(--warning)); }
	.highlight-pronoun { color: var(--success,var(--green)); }
	.highlight-verb { color:var(--info,var(--cyan)); }
	.highlight-adjective { color:var(--orange); }
</style>

<script>
var prepositions  = new Array(
	'我们','我','你','她','他','它','谁','她的','他的','他们', '他们的', '那个', '哪个', '谁的', '任何一个', '任何人', '这个', '这些', '那些', '任何东西', '各个', '每个人', '每一件事', '没有人', '没有一个', '没有什么', '某人', '一个', '某物', '少数', '很多', '两个', '几个', '任何', '全部', '一些','一起', '大多数', '没有', '我自己', '你自己', '我们自己', '你们自己', '她自己', '他自己', '他们自己', '它自己', '什么'
	);
var conjunctions  = new Array(
	'也不','但是','或者','所以','不仅', '而且', '两者都', '无论是否', '虽然', '即使', '只要', '一旦', '因为', '以便', '为了', '如果', '少于', '那个', '除非', '直到',  '像','当','为','和','是',  '在哪里'
	);
var pronouns = new Array(
	  '旁边', '附近','之前','之上', '之中',  '横穿', '超出', '关掉', '之下', '之后', '通过', '打开', '反对', '尽管', '不同于', '沿着', '向下', '相对', '直到', '之间', '期间', '出去', '向上', '周围', '除了', '在外面', '作为', '为了','来自', '过去的',  '之前', '之内', '环绕', '后面', '自从', '没有', '下面','的', '到', '与', '在', '朝', '比', '像','关于'
	);
var verbs = new Array('睡觉','学习','看见','听见','说',  '做',  '叫', '看',  '听',  '打',  '想',  '买',  '吃',  '喝',  '跑',  '开',  '坐',  '站',  '到',  '带', '给','问');

var adjectives = new Array('漂亮的', '帅气的', '聪明的', '可爱的', '酷的', '懒的', '活泼的', '悲伤的', '兴奋的', '安静的', '温暖的', '寒冷的', '热情的', '冷酷的', '快乐的', '不安的', '放松的', '紧张的', '友好的','灿烂的', '严厉的','瘦弱的','脆弱的','狠狠的','轻轻的','慢悠悠的','空洞的');

	var re_prepositions = new RegExp('('+prepositions.join('|')+')', 'g');
	var re_conjunctions = new RegExp('('+conjunctions.join('|')+')', 'g');
	var re_pronouns = new RegExp('('+pronouns.join('|')+')', 'g');
	var re_verbs = new RegExp('('+verbs.join('|')+')', 'g');
	var re_adjectives = new RegExp('('+adjectives.join('|')+')', 'g');


	var message = document.getElementById('message').innerHTML;

	function highlight(message) {
		message.innerHTML = message.innerHTML.replace(re_prepositions, '<span class="highlight-preposition">$1</span>');
		message.innerHTML = message.innerHTML.replace(re_pronouns, '<span class="highlight-pronoun">$1</span>');
		message.innerHTML = message.innerHTML.replace(re_verbs, '<span class="highlight-verb">$1</span>');
		message.innerHTML = message.innerHTML.replace(re_adjectives, '<span class="highlight-adjective">$1</span>');
		message.innerHTML = message.innerHTML.replace(re_conjunctions, '<span class="highlight-conjunction">$1</span>');
	}

	document.querySelectorAll( '.message' ).forEach( content => {
			content.querySelectorAll( '*' ).forEach( highlight );
			highlight( content );
		} );

</script>

 

效果:

使用WTFPL授权

最新回复 (7)
全部楼主
  • 浅唱 站长
    2023-4-13 2
    0
    眼花了,哈哈
  • tb252111
    2023-4-13 3
    0
    我有插件需求,你看一下QQ
  • 麦芒
    11月前 4
    0
    楼主,我只是来混个熟的!老板,侬亿雷凑闹嫩了!
  • tyuv123
    11月前 5
    0
  • juse
    12天前 6
    0
    好家伙。。。
  • Tillreetree 版主 楼主
    11天前 7
    0
    juse 好家伙。。。
  • 普罗米修斯 站长
    10天前 8
    0
    好多个数组啊
返回