Question

当我尝试将变量放入已经在字符串内的字符串中时，我遇到了一个小问题。基本上，我试图用颜色变量（一个字符串，例如“＃FF0”）来改变特定单词的颜色。这就是替换功能的样子：

$('#textWithTheWord').replaceWith($('<div></div>').append($('#textWithTheWord').clone()).html().replace(word, '<span style="color:red;">' + word + '</span>'));

请注意，我想用'<span style="color:red;">'替换该变量中的“red”。提前谢谢！

Answer 1

一个简单的解决方案是简单地用一个新的html字符串替换元素的innerHTML属性，该字符串将包含span中的单词。但是，它不是一个非常灵活的解决方案，因为通过替换innerHTML属性，所有元素都将被更新，并且可能会产生意外结果，除非您定位仅包含文本节点的元素。

假设body包含此文本：

this is some text and I want to replace the word cool

你可以：

var $body = $(document.body);

$body.html($body.html().replace(/\b(cool)\b/g, '<span style="color: red;">$1</span>'));

此处/\b(cool)\b/g正则表达式将匹配每个酷字词并在其上创建捕获组，允许我们在替换表达式中将其引用为$1。

但是，最先进的解决方案可能实现如下：

循环未包含span属性data-styled-text的文本节点。（您可以查看textNode.parentNode属性）
通过<span data-styled-text>标记围绕您想要的字词。看看https://developer.mozilla.org/fr/docs/DOM/Text.splitText
查询所有<span data-styled-text>元素并对其执行任何操作。

我已经玩弄了这个概念，我为你创建了一个小提琴，展示了如何使用regex以特定文本为目标，以任何方式操作文本。我创建了2个主要函数wrapText和styleText，它们允许您使用页面上的文本执行任何操作。它可以进一步优化，但你会明白这一点。

查看http://jsfiddle.net/scarsick/tX4Ge/1/

以下函数允许您在文本节点中包装任何文本。

function wrapText(textNode, textRx, wrapFn) {
    var global = textRx.global,
        wrapEl,
        result, 
        rightTextNode,
        matchedText,
        index;

    while (result = textRx.exec(textNode.nodeValue)) {
        rightTextNode = textNode.splitText(index = result.index);
        rightTextNode.nodeValue = rightTextNode.nodeValue.substring((matchedText = result[0]).length);
        wrapEl = wrapFn(matchedText, index);
        wrapEl.appendChild(document.createTextNode(matchedText));
        rightTextNode.parentNode.insertBefore(wrapEl, rightTextNode);

        if (!global) {
            break;
        }

        textNode = rightTextNode;
        textRx.lastIndex = 0;
    }    
}

以下函数允许您设置元素中包含的任何文本的样式。

function styleText(el, textRx, styleFn) {
    var wrapEl = document.createElement('span'),
        slice = [].slice;

    wrapEl.setAttribute('data-styled-text', 'true');

    styleText = function(el, textRx, styleFn) {
        var childNodes = slice.call(el.childNodes, 0),
            i = 0,
            len = childNodes.length,
            node;

        for (; i < len; i++) {
            node = childNodes[i];

            switch (node.nodeType) {
                case 3:
                     if (!node.parentNode.getAttribute('data-styled-text')) {
                         wrapText(node, textRx, function (text, index) {
                             var el = wrapEl.cloneNode();

                             styleFn(el, text, index);

                             return el;
                         });

                         continue;
                    }

                    styleFn(node.parentNode);
                    break;
                case 1:
                    styleText(node, textRx, styleFn);
                    break;
            }
        }
    };

    styleText(el, textRx, styleFn);
}

Answer 2

如果所有代码仅用于更改元素中文本的颜色，则可以大大简化：

var color = "#ff8877";
$('#textWithTheWord').css('color', color);

http://api.jquery.com/css/

没有必要使用DOM或字符串连接来更改元素的属性或样式。 jQuery可能会有一个能够完成您想要的功能。

String内的String内的变量

2 个答案: