字符串内的字符串内部的变量

问题描述：

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

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

注意，我想与该变量来代替“红”在'<span style="color:red;">'。在此先感谢！

如果我理解正确，'#textWithTheWord'是一个'元素'，它包含一个'span'，它具有设置'color'的内联'样式'属性。然后你想修改那个'span'元素的'color'值。是对的吗？如果是这样的话，是否有任何理由通过操纵字符串来实现这一点？ – plalx 2013-04-11 20:35:13

@plalx是的，到目前为止，你是对的。我试图改变一个特定的单词的颜色，我发现的唯一解决方案就是在这里：[link]（http://stackoverflow.com/questions/10328281/need-to-replace-font-for-a-particular -字）。 – 2013-04-11 20:42:18

我已经发布了您的问题的答案，我希望它可以帮助。好运！ ;） – plalx 2013-04-11 22:17:39

答

一个简单的解决方案是简单地用一个新的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); 
}

答

如果所有的代码的存在只是为了改变元素文字的颜色，可以极大地简化它，如下所示：

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

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

有没有需要约与玩DOM或字符串连接来更改元素的属性或样式。 jQuery可能会有一个功能，你已经做到了。

字符串内的字符串内部的变量

相关推荐