Question

我正在为我的问题寻找解决方案我有一段带有Twitter推文的文字。现在我想将所有'@'改为颜色。

这就是我在文中寻找'@'的方法：

if (status.indexOf("@") >= 0)
{

}

但是现在怎样才能改变@的颜色？（添加范围和类或其他东西......）

状态是一个变量，其内容为ex。像这样：

Dita Von Teese draagt geprinte 3D-jurk  <a target="_blank" href="http://t.co/s2y6b21S0I">http://t.co/s2y6b21S0I</a> via @<a target="_blank" href="http://twitter.com/Knackweekend">Knackweekend</a>

Answer 1

没有看到你的HTML，我能提供的最好的是一个简单的替换，我假设status是HTML元素/节点的jQuery集合：

status.html(function(i,h){
    return h.replace(/@/g,'<span class="atSign">@</span>');
});

加上CSS：

.atSign {
    color: #f90;
}

已更新，因为status似乎是一个字符串（来自下面的评论）：

var status = '<a target="_blank" href="t.co/s2y6b21S0I">http://t.co/s2y6b21S0I</a>; via @<a target="_blank" href="twitter.com/Knackweekend">Knackweekend</a>',
    newStatus = status.replace(/@/g,'<span class="atSign">@</span>');
console.log(newStatus);

JS Fiddle demo

使用CSS为@ 和以下a元素着色：

.atSign,
.atSign + a {
    color: #f90;
}

JS Fiddle demo

在@中包含a 和以下span元素：

var status = '<a target="_blank" href="t.co/s2y6b21S0I">http://t.co/s2y6b21S0I</a>; via @<a target="_blank" href="twitter.com/Knackweekend">Knackweekend</a>',
    newStatus = status.replace(/(@.+<\/a>)/g,function(a){
    return '<span class="atSign">' + a + '</span>';
    });
console.log(newStatus);

JS Fiddle demo

参考文献：

Answer 2

是的，您需要将@包裹在span class中，以便您可以使用CSS更改颜色。

您可以像这样操纵DOM

CSS

.atSign {
    color: #f90;
}

HTML

<div id="status">Some @ text <div>that @ contains@what</div>we will@ demonstrate</div>

的Javascript

/*jslint maxerr: 50, indent: 4, browser: true */

(function () {
    "use strict";

    function walkTheDOM(node, func) {
        func(node);
        node = node.firstChild;
        while (node) {
            walkTheDOM(node, func);
            node = node.nextSibling;
        }
    }

    function getTextNodes(element) {
        var nodes = [];

        walkTheDOM(element, function (node) {
            if (node.nodeType === 3) {
                nodes.push(node);
            }
        });

        return nodes;
    }

    function highlight(element, string, classname) {
        var nodes = getTextNodes(element),
            length = nodes.length,
            stringLength = string.length,
            i = 0,
            index,
            text,
            newContent,
            span,
            node;

        while (i < length) {
            node = nodes[i];
            newContent = document.createDocumentFragment();
            text = node.nodeValue;
            index = text.indexOf(string);
            while (index !== -1) {
                newContent.appendChild(document.createTextNode(text.slice(0, index)));
                text = text.slice(index + stringLength);
                span = document.createElement("span");
                span.className = classname;
                span.appendChild(document.createTextNode(string));
                newContent.appendChild(span);
                index = text.indexOf(string);
            }

            newContent.appendChild(document.createTextNode(text));
            node.parentNode.replaceChild(newContent, node);
            i += 1;
        }
    }

    highlight(document.getElementById("status"), "@", "atSign");
}());

在jsfiddle

上

如何在你问的HTML字符串中使用它？

的Javascript

var div = document.createElement("div"),
    html;

div.innerHTML = 'Dita Von Teese draagt geprinte 3D-jurk  <a target="_blank" href="http://t.co/s2y6b21S0I">http://t.co/s2y6b21S0I</a> via @<a target="_blank" href="http://twitter.com/Knackweekend">Knackweekend</a>';

highlight(div, "@", "atSign");
html = div.innerHTML;

console.log(html);

输出

Dita Von Teese draagt geprinte 3D-jurk  <a target="_blank" href="http://t.co/s2y6b21S0I">http://t.co/s2y6b21S0I</a> via <span class="atSign">@</span><a target="_blank" href="http://twitter.com/Knackweekend">Knackweekend</a>

在jsfiddle

上

看不到jquery或正则表达式：）

Answer 3

您可以在同一索引上插入新范围，并删除该索引中的现有项目。

如果文字包含'@'改变'@'的颜色

3 个答案: