Un complemento de jquery todos los días: seleccione y agregue color de fondo
Seleccionar y agregar color de fondo
Me tomó mucho tiempo hacer esto. Pensé que era simple. Como resultado ..., el texto describe el efecto, es decir, debes seleccionar una parte de tu artículo para que te marque automáticamente, y puedes escriba más de uno, planificará ¿Cómo lograrlo?
El efecto es el siguiente
Parte de código
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选中加颜色</title>
</head>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
.rel{
position: relative;
}
#div {
border: 1px solid lightgray;
width: 100%;
text-indent: 24px;
line-height: 40px;
margin: 10px;
z-index: 3;
position: absolute;
}
.clone {
z-index: 1!important;
}
.check {
background-color: yellow;
}
</style>
<body>
<div id="div">黄初三年，余朝京师，还济洛川。古人有言：“斯水之神，名曰宓妃。”感宋玉对楚王神女之事，遂作斯赋。其词曰：
余从京域，言归东藩，背伊阙，越轘辕，经通谷，陵景山。日既西倾，车殆马烦。尔乃税驾乎蘅皋，秣驷乎芝田，容与乎阳林，流眄乎洛川。于是精移神骇，忽焉思散，俯则未察，仰以殊观。睹一丽人，于岩之畔。乃援御者而告之曰：“尔有觌于彼者乎？彼何人斯？若此之艳也！”御者对曰：“臣闻河洛之神，名曰宓妃，然则君王所见，无乃是乎？其状若何，臣愿闻之。”
余告之曰：“其形也，翩若惊鸿，婉若游龙，荣曜秋菊，华茂春松。仿佛兮若轻云之蔽月，飘飖兮若流风之回雪。远而望之，皎若太阳升朝霞；迫而察之，灼若芙蕖出渌波。秾纤得衷，修短合度，肩若削成，腰如约素。延颈秀项，皓质呈露，芳泽无加，铅华弗御。云髻峨峨，修眉联娟，丹唇外朗，皓齿内鲜。明眸善睐，靥辅承权，瑰姿艳逸，仪静体闲。柔情绰态，媚于语言。奇服旷世，骨象应图。披罗衣之璀粲兮，珥瑶碧之华琚。戴金翠之首饰，缀明珠以耀躯。践远游之文履，曳雾绡之轻裾，微幽兰之芳蔼兮，步踟蹰于山隅。
于是忽焉纵体，以遨以嬉。左倚采旄，右荫桂旗。攘皓腕于神浒兮，采湍濑之玄芝。余情悦其淑美兮，心振荡而不怡，无良媒以接欢兮，托微波而通辞。愿诚素之先达兮，解玉佩以要之。嗟佳人之信修兮，羌习礼而明诗，抗琼珶以和予兮，指潜渊而为期。执眷眷之款实兮，惧斯灵之我欺，感交甫之弃言兮，怅犹豫而狐疑。收和颜而静志兮，申礼防以自持。
于是洛灵感焉，徙倚彷徨，神光离合，乍阴乍阳。竦轻躯以鹤立，若将飞而未翔，践椒涂之郁烈，步蘅薄而流芳。超长吟以永慕兮，声哀厉而弥长。
尔乃众灵杂遝，命俦啸侣，或戏清流，或翔神渚，或采明珠，或拾翠羽。从南湘之二妃，携汉滨之游女，叹匏瓜之无匹兮，咏牵牛之独处。扬轻袿之猗靡兮，翳修袖以延伫。体迅飞凫，飘忽若神，凌波微步，罗袜生尘。动无常则，若危若安，进止难期，若往若还。转眄流精，光润玉颜，含辞未吐，气若幽兰。华容婀娜，令我忘餐。
于是屏翳收风，川后静波，冯夷鸣鼓，女娲清歌。腾文鱼以警乘，鸣玉鸾以偕逝，六龙俨其齐首，载云车之容裔。鲸鲵踊而夹毂，水禽翔而为卫。于是越北沚，过南冈，纡素领，回清阳，动朱唇以徐言，陈交接之大纲。恨人神之道殊兮，怨盛年之莫当，抗罗袂以掩涕兮，泪流襟之浪浪。悼良会之永绝兮，哀一逝而异乡，无微情以效爱兮，献江南之明珰。虽潜处于太阴，长寄心于君王。忽不悟其所舍，怅神宵而蔽光。
于是背下陵高，足往神留，遗情想像，顾望怀愁。冀灵体之复形，御轻舟而上溯。浮长川而忘反，思绵绵而增慕，夜耿耿而不寐，沾繁霜而至曙。命仆夫而就驾，吾将归乎东路，揽騑辔以抗策，怅盘桓而不能去。</div>
</body>
</html>
<script>
$(function() {
$("#div").parent().addClass("rel")
var $clone = $("#div").clone();
$clone.addClass("clone");
$clone.appendTo($("#div").parent())
$("#div").mousedown(function() {
this.flag = true;
}).mouseup(function() {
var that = this;
that.flag = false;
var temp = window.getSelection();
var str = temp.anchorNode.data;
var ab = $(this).attr("data-ab", $(this).attr("data-ab") + "," + temp.anchorOffset + "-" + temp.extentOffset)
$(this).text($(this).text());
$(this).draw();
})
$.prototype.draw = function() {
var ab = $(this).attr("data-ab").split(",");
var arr = [];
ab.forEach(item => {
if (item != "undefined") {
var item = item.split("-");
item = [parseInt(item[0]), parseInt(item[1])]
arr.push(item);
}
})
arr = merge(merge(arr)); //合并交集之后的区间集合
var str = "";
var txt = $(this).text();
var tarr = [];
arr.forEach(item => {
str += item[0] + "-" + item[1] + ",";
var temp = txt.substring(item[0], item[1]);
tarr.push(temp);
})
str = str.endsWith(",") ? str.substr(0, str.length - 1) : str; //处理好了之后把数据存回标签
$(this).attr("data-ab", str);
tarr.forEach(item => {
txt = txt.replace(item, "<span class='check'>" + item + "</span>");
})
$clone.html(txt);
}
//区间合并算法
function merge(arr) {
//排序
arr.sort(function(a, b) {
//sort这里写的判断函数意思是为正就调换顺序
if (a[0] != b[0]) {
//假如起始点不一样
return a[0] - b[0] //按照谁最左边在前谁排前面
}
return a[1] - b[1] //假如起始点一样了，那谁的右边更宽谁放前边
})
let ans = [],
start, end; //排成有序之后就有大概的感觉了应该，这个时候再一次性合并
//排序之后，看看有没有重叠的，如果有，合并
for (let i = 0; i < arr.length; i++) {
let s = arr[i][0],
e = arr[i][1];
if (start === undefined) {
start = s, end = e;
} else if (s <= end) {
end = Math.max(e, end)
} else {
let part = [start, end];
ans.push(part)
start = s;
end = e
}
}
if (start !== undefined) {
let part = [start, end]
ans.push(part)
}
return ans
}
})
</script>
Explicación de la idea
- Al leer una novela, a veces, cuando se presiona la pantalla con fuerza, aparecerá un subrayado para marcar el párrafo que le gusta. Quiero hacer este efecto en la web, y también puede tener el efecto de la persistencia de datos. Regístrelo y conviértase en el objeto del almacenamiento de la base de datos, entonces debe pensar en cómo diseñarlo.
- Es fácil marcar el color de fondo. Dé una etiqueta en línea a la clase del estilo de marca y la etiqueta en la etiqueta servirá.
- Pero tenemos muchos métodos. Por ejemplo, un párrafo de texto de otra persona lo dividirá directamente en etiquetas individuales y registrará cada una por ti. No tengo nada que decir. Tu servidor es increíble, así que puedes hacerlo casualmente, así que lo pensé más tarde. Solo guarda el intervalo. De todos modos, el artículo no se publicará. Recuerdo la primera posición de la marca que dibujaste y luego la dibujé para ti. ¿No está bien?
- Piense en la dirección, luego hagámoslo. En primer lugar, sepa qué acciones se tomarán cuando se deslice el texto seleccionado. Presione y suelte el mouse. Al mismo tiempo, el texto seleccionado aparecerá con el fondo azul predeterminado y texto en blanco. Los dos primeros son fáciles de conocer acerca de la serie del mouse. Las acciones están hacia arriba y hacia abajo. Luego, debes encontrar el tercero por ti mismo. Cuando lo encuentres, encontrarás
window.getSelection()esta API, que es para devolver la información relevante del texto seleccionado por el usuario actual, que probablemente sea el siguiente
- Probablemente le diga de dónde proviene el texto seleccionado, dónde los puntos de inicio y finalización del área al que pertenece, cuánto texto hay en el medio y cuál es el texto original del intervalo seleccionado que involucra, probablemente eso es todo.
- Entonces, a través de esto, podemos saber fácilmente el punto de inicio y el punto de finalización. Eso es todo. Encuentro el punto de inicio y el punto de finalización directamente. Un reemplazo reemplaza la etiqueta correspondiente con el color de fondo, buenos chicos, esta es la primera ola de errores, debido a esta sustitución, solo se puede reemplazar uno, no más, porque la etiqueta en esta pieza de texto sin formato contaminará los parámetros que obtiene de la API anterior, y las siguientes cosas se estropearán.
- Entonces, elegir una marca no es suficiente, y cuando los datos deben conservarse, entonces guardamos el subíndice, ¿y no se puede hacer de una vez? En este momento, implica el algoritmo que mencioné, fusión de intervalos, porque no puede terminar la representación de la etiqueta anterior, pero el siguiente campo de texto encuentra parte de la etiqueta representada arriba, ¿verdad? Por lo tanto, esta combinación de intervalo de tiempo es necesaria. Aquí, la idea se aclara gradualmente, seleccione y luego obtenga la información de coordenadas almacenada en la etiqueta, coloque la última selección seleccionada y luego procese en el formato correspondiente y guárdelo nuevamente. Antes de guardar , guarde la etiqueta seleccionada a la vez. Todo renderizado
- Luego, podemos obtener el campo correspondiente por subíndice, porque después de que la fusión del intervalo no causará la captura mutua de campos, el método de reemplazo puede reemplazarlo perfectamente, pero hay un segundo error más adelante.
- Cuando complete la representación única de las etiquetas, encontrará que si selecciona el nuevo texto nuevamente, habrá un problema por segunda vez. El seleccionado nunca se procesará. Por el contrario, el no seleccionado arriba ser marcado inexplicablemente para usted, este es el problema de interferencia mencionado anteriormente. Cuando tiene un diseño con un párrafo de texto mezclado con etiquetas en línea, todo lo que puede ver es un montón de texto sin otra estructura, pero
window.getSelection()el comienzo del registro comienza con el final de la etiqueta., Así que esta vez, cuando seleccione por segunda vez, habrá más o menos problemas, ¡porque su acción de marcado destruye la estructura del texto original! - Así que copié una capa directamente y puse la copia debajo, y las dos capas se apilaron juntas, y la capa de copia mostró el rendimiento.
- Se acabó, sueño roto ~ (no lo esperaba)