如果文本包含“@”，请更改“@”的颜色

if text contains '@' change color of '@'

本文关键字：颜色 文本 如果 包含      更新时间：2023-09-26

我正在寻找解决我的问题的方法。
我有一个段落，其中包含来自推特推文的一些文字。现在我想将所有的"@"更改为一种颜色。

这就是我在文本中查找"@"所做的：

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

但是现在如何更改@的颜色？(添加一个跨度和类或其他东西...

状态是一个变量，其中包含例如的内容，如下所示：

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>

在没有看到你的 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小提琴演示。

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

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

JS小提琴演示。

将@和以下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小提琴演示。

引用：

  • html() .
  • JavaScript 正则表达式。
  • String.replace() .

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

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

你可以像这样操纵 DOM。

.CSS

.atSign {
    color: #f90;
}

.HTML

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

爪哇语

/*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字符串来使用它？

爪哇语

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或正则表达式:)

相关文章：