Question

编辑[我怎么能]用javascript更改HTML文档中每个R和r的颜色？

Answer 1

我会使用highlight plugin for jQuery。然后做一些事情：

$('*').highlight('r'); // Not sure if it's case-insensitive or not

并在CSS中：

.highlight { background-color: yellow; }

Answer 2

可行但不容易。没有CSS方法可以做到这一点。

基本上，您需要使用Javascript并遍历所有节点。如果它是文本节点，您可以搜索“R”，然后用<span style="color:red">R</span>

替换R

我显然简化了这一点，最好是动态添加“突出显示”类，而不是硬编码样式，并在CSS中定义。同样，我确定你想要参数化搜索字符串。此外，这没有考虑文本节点是什么，例如，我有特殊处理来跳过评论，但你可能会发现还需要跳过其他东西（脚本节点？）。

 function updateNodes(node) { 
   if (node.nextSibling)
     updateNodes(node.nextSibling);
   if (node.nodeType ==8) return; //Don't update comments
   if (node.firstChild)
      updateNodes(node.firstChild);
   if (node.nodeValue) { // update me    
       if (node.nodeValue.search(/[Rr]/) > -1){ // does the text node have an R
               var span=document.createElement("span");
               var remainingText = node.nodeValue;
               var newValue='';
               while (remainingText.search(/[Rr]/) > -1){ //Crawl through the node finding each R
                 var rPos = remainingText.search(/[Rr]/);
                 var bit = remainingText.substr(0,rPos);
                 var r = remainingText.substr(rPos,1);
                 remainingText=remainingText.substr(rPos+1);
                 newValue+=bit;
                 newValue+='<span style="color:red">';
                 newValue+=r;
                 newValue+='</span>';
               }
               newValue+=remainingText;
               span.innerHTML=newValue;
               node.parentNode.insertBefore(span,node);
               node.parentNode.removeChild(node);   
            } 
        }
     } 

        function replace(){   updateNodes(document.body); 
}

Answer 3

您需要使用DOM（或jQuery）来遍历文档中的每个文本节点。每当你找到字母R时，应用一个将字母包装在适当元素中的转换。

e.g。将文本节点“art”转换为“a<span class="colored">r</span>t”。这会添加两个新文本节点“r”和“t”以及新的span元素。

Answer 4

是的，这可以通过一些Javascript，一小部分CSS和一些正则表达式来实现。

首先，你需要定义一个提供所需颜色的样式（在我下面的例子中我指的是一个名为“new-color”的CSS类），然后对你的HTML内容运行一些正则表达式进行搜索和更换。您希望将所有“r”和“R”字符更改为此类内容（例如）：

<span class="new-colour">r</span>

如果您不了解正则表达式，那么有很多资源可以帮助您入门。您会很高兴知道您的要求非常简单，所以不用担心。以下是几个链接：

regexlib.com

8 regular expressions you should know

Answer 5

jQuery的高亮插件是一个选项。另一种选择 - 尤其是明天以后 - 您可能希望将突出显示扩展为关键字或其他术语，即使用Google的Closure goog.dom.annotate类。这个类的美妙之处在于它实际上只会恰当地解析dom树注释相关条款。它还允许您使用某些类来排除元素或元素。

注释的一个常见问题是，如果您不小心，可能会弄乱HTML。

例如'上面发布的'简单解决方案'

var body = document.getElementsByTagName("body")[0];
var html = body.innerHTML
.replace(/(^|>[^<rR]*)([rR])/g, "$1<em>$2</em>");
body.innerHTML = html;

肯定也会捕获任何样式属性中的术语。如果你有这个：

<p class="red">text......</p>

它将成为

<p class="<span class="red">r</span>ed .....

会打破你的HTML。

一般来说，DOM解析是“慢”的，所以尽量避免注释整个网页，问问自己为什么只需要突出显示R？其实我很好奇你为什么要注释r？：）

Answer 6

普通JS解决方案，无需任何20kB JS库：

var body = document.getElementsByTagName("body")[0];
var html = body.innerHTML
               .replace(/(^|>[^<rR]*)([rR])/g, "$1<em>$2</em>");
body.innerHTML = html; // note that you will lose all
                       // event handlers in this step...

Javascript：改变html文档中每个“r”的颜色

6 个答案: