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

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”，然后将R替换为<span style="color:red">R</span>

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

 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

是的，这可以通过一点 Javascript、少量 CSS 和一些正则表达式来实现。

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

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

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

regexlib.com

8 regular expressions you should know

Answer 4

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

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

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

无需任何 20kB JS 库的普通 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...