javascript - if text contains '@' change color of '@' - Stack Overflow

admin管理员组

文章数量:1291142

I'm looking for a solution for my problem.
I have a paragraph with some text from a twitter tweet. Now I would like to change all the '@'s to a color.

This is what I do to look for '@'s in my text:

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

}

But now how can I change the color of the @? (Add a span and class or something ...)

The status is a variable with content for ex. like this:

Dita Von Teese draagt geprinte 3D-jurk  <a target="_blank" href="">;/a> via @<a target="_blank" href="">Knackweekend</a> 

I'm looking for a solution for my problem.
I have a paragraph with some text from a twitter tweet. Now I would like to change all the '@'s to a color.

This is what I do to look for '@'s in my text:

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

}

But now how can I change the color of the @? (Add a span and class or something ...)

The status is a variable with content for ex. like this:

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./Knackweekend">Knackweekend</a> 

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jun 19, 2013 at 13:32 David Thomas 253k5353 gold badges381381 silver badges419419 bronze badges asked Jun 19, 2013 at 12:23 nielsvnielsv 6,8303535 gold badges117117 silver badges219219 bronze badges 1

• developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – Marty Commented Jun 19, 2013 at 12:25

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 13

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 ments, below):

var status = '<a target="_blank" href="t.co/s2y6b21S0I">http://t.co/s2y6b21S0I</a>; via @<a target="_blank" href="twitter./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./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().

You can insert a new span on same index and remove the existing item in that index.

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./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./Knackweekend">Knackweekend</a> 

On jsfiddle

And no jquery or regexs in sight :)

本文标签： javascriptif text contains 3939 change color of 3939Stack Overflow