0

すでに文字列内にある文字列内に変数を入れようとすると、少し問題が発生します。基本的に、特定の単語の色を色変数 ("#FF0" などの文字列) で変更しようとしています。置換関数は次のようになります。

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

'<span style="color:red;">'「赤」をその変数に置き換えたいことに注意してください。前もって感謝します！

4

2 に答える 2

2

簡単な解決策は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>必要な操作を行います。

私はその概念をいじくり回し、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);
}
于 2013-04-11T22:12:40.957 に答える