javascript - 如果文本包含“@”，则更改“@”的颜色

Question

我正在为我的问题寻找解决方案。
我有一段文字来自推特推文。现在我想将所有的“@”更改为一种颜色。

这就是我在文本中查找“@”的方法：

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

Without seeing your HTML, the best I can offer is a simple replace, and I'm assuming that status is a jQuery collection of HTML elements/nodes:

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

Coupled with the CSS:

.atSign {
    color: #f90;
}

Updated, since status appears to be a string (from the comments, below):

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.

To colour the @ and the following a element, with CSS:

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

JS Fiddle demo.

To wrap the @ and the following a element within the 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.

References:

• html().
• JavaScript regular expressions.
• String.replace().

Answer 2

Yes, you will need to wrap the @ in a span with a class so that you can change the colour with CSS.

You could manipulate the DOM like this

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");
}());

On jsfiddle

How can you use this with your HTML string you ask?

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);

Output

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> 

On jsfiddle

And no jquery or regexs in sight :)

Answer 3

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