gpt4 book ai didi

javascript - 使用 jquery 突出显示页面中的所有逗号

转载 作者:太空宇宙 更新时间:2023-11-03 23:30:56 27 4
gpt4 key购买 nike

我有一个非常非常简单的问题,但我没有找到答案。

我有一个使用 ajax 的页面,它在其中的一个 div 中一次又一次地更新。

现在,我想突出显示 div 的所有逗号 ,。例如,它们变成红色。

我如何使用这个 ajax 页面完成它?

我也想尝试使用这个代码,但我做不到

$(document":contains(',')").css("color","red");

我只需要每秒找到那个 div 中的所有逗号并为它们指定样式。

如何用 jquery 做到这一点?

最佳答案

不知道 jQuery,但可以用纯 javascript 来完成。但实际上并没有那么容易。

tl;dr jsFiddle

这个答案不会导致 DOM 重新生效,也不会混淆 javascript 事件!

首先,您需要遍历页面内容并将每个逗号(或每个字符)替换为 <span>或其他节点,以便您可以为其赋予单独的 CSS 样式。让我们从获取文本节点开始:

HTMLElement.prototype.getTextNodes = function(recursive, uselist) {
var list = this.childNodes;
var nodes = uselist!=null?uselist:[];
for(var i=0,l=list.length; i<l;i++) {
if(list[i].nodeType==Node.TEXT_NODE) {
nodes.push(list[i]);
}
else if(recursive==true&&list[i].nodeType==1&&list[i].tagName.toLowerCase()!="script"&&list[i].tagName.toLowerCase()!="style") {
list[i].getTextNodes(true, nodes);
}
}
//console.log(nodes);
return nodes;
}

您现在需要在逗号所在的位置拆分跨度:

/*Turn single text node into many spans containing single letters */
/* @param
textNode - HTMLTextNode element
highlight - the character to highlight
@return
null
*/
function replaceLetters(textNode, highlight) {
//Get the string contained in the text node
var text = textNode.data;
//Generate a container to contain text-node data
var container = document.createElement("span");
//Create another span for every single letter
var tinyNodes = [];
//Split the letters in spans
for(var i=0,l=text.length;i<l; i++) {
//skip whitespace
if(text[i].match(/^\s*$/)) {
container.appendChild(document.createTextNode(text[i]));
}
//Create a span with the letter
else {
//Create a span
var tiny = document.createElement("span");
//If the letter is our character
if(text[i]==highlight)
tiny.className = "highlighted";
tiny.innerHTML = text[i];
container.appendChild(tiny);
}
}
//replace text node with a span
textNode.parentNode.insertBefore(container, textNode);
textNode.parentNode.removeChild(textNode);
}

上面的函数最初用于动画页面上的所有字母(即使它已经加载)。您只需更改其中一些的颜色。

如果定义了上面的函数,调用这个:

var nodes = document.getElementById("myDiv").getTextNodes(true);
for(var i=0, l=nodes.length; i<l; i++) {
replaceLetters(nodes[i], ",");
}

关于javascript - 使用 jquery 突出显示页面中的所有逗号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25372960/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com