String內的String內的變量

Question

當我嘗試將變量放在一個已經在字符串中的字符串中時，我遇到了一個小問題。 基本上，我試圖用顏色變量（字符串，例如“＃FF0”）更改特定單詞的顏色。 這就是替換功能的樣子：

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

請注意，我想用'<span style="color:red;">'替換該變量中的'<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引用。

但是，最先進的解決方案可能實現如下：

• 循環不包含在具有data-styled-text屬性的span內的文本節點。 （你可以查看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可能會有一個功能，可以做你想要的。