javascript - 字符串内的变量 字符串内的变量

Question

当我尝试将变量放入已经存在于字符串中的字符串中时，遇到了一个小问题。基本上，我试图用颜色变量(字符串，例如“#FF0”)更改特定单词的颜色。这就是替换函数的样子:

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

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

Answer 1

一个简单的解决方案就是简单地替换 innerHTML元素的属性由一个新的 html 字符串组成，该字符串会将单词包装在 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>元素并对其进行任何您想要的操作。

我已经考虑过这个概念，并且我为您创建了一个 fiddle ，它展示了如何使用 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);
}