Hitokoto·一言是一个挺有意思的项目，官方的自我介绍如下： 

一言网(Hitokoto.cn)创立于2016年，隶属于萌创Team，目前网站主要提供一句话服务。
动漫也好、小说也好、网络也好，不论在哪里，我们总会看到有那么一两个句子能穿透你的心。我们把这些句子汇聚起来，形成一言网络，以传递更多的感动。如果可以，我们希望我们没有停止服务的那一天。
简单来说，一言指的就是一句话，可以是动漫中的台词，也可以是网络上的各种小段子。
或是感动，或是开心，有或是单纯的回忆。来到这里，留下你所喜欢的那一句句话，与大家分享，这就是一言存在的目的。

一言API如下：点击链接查看一言API

本站目前选用的JS版api

<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>

本文的主要目的就是：“在同一个页面中的多个地方同时显示一言”。

比如，我按照下方方式调用api，则并不能达到预想的结果（所有class为hitokoto的元素内容填充为“一言”）

<script src="https://v1.hitokoto.cn/?encode=js&select=.hitokoto" defer></script>

首先访问上方js链接看一下“一言”的js版API内容，如下

(function hitokoto() {
    var hitokoto = "腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。";
    var dom = document.querySelector('.hitokoto');
    Array.isArray(dom) ? dom[0].innerText = hitokoto : dom.innerText = hitokoto;
})()

读一下js源码，api返回的是一个js自执行函数，通过url赋值的select参数获取对应的dom元素进行赋值。但是api中限定了不管querySelector('xx')匹配到多少条记录，只会对第一条记录进行赋值操作（Array.isArray(dom)）。

那么要如何才能实现“在同一个页面中的多个地方同时显示一言”的功能？下面就是今天的重点内容：JS注入

首先我稍微改变一些api的select参数，最终结果如下

<script src="https://v1.hitokoto.cn/?encode=js&c=d&select=.hitokoto%27);dom=$('.hitokoto');for(var i=0;i<dom.length;i%2B%2B){dom[i].innerText=hitokoto;}})()//" defer></script>

主要就是“.hitokoto%27);dom=$('.hitokoto');for(var i=0;i<dom.length;i%2B%2B){dom[i].innerText=hitokoto;}})()//”这一段内容。

先来解释下这段代码的含义：

呸，没啥好解释的，简单暴力点，直接将src的链接copy到地址栏，回车查看内容！

(function hitokoto() {
	var hitokoto = "只是，想要做些什么而已。 觉得不做些什么就会死掉而已。";
	var dom = document.querySelector('.hitokoto');
	dom = $('.hitokoto');
	for (var i = 0; i < dom.length; i++) {
		dom[i].innerText = hitokoto;
	}
})() //');Array.isArray(dom)?dom[0].innerText=hitokoto:dom.innerText=hitokoto;})()

看到这一步，各位明白刚开始那个问题是如何解决的了吧？通过JS注入直接将原API的函数修改掉了。现在再去试一下，在页面中定义多个相同class的“一言”容器，功能已经实现。