一个简单的解决方案是简单地用一个新的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
。
我已经把玩围绕与概念,我为你创建一个小提琴,显示你如何能操纵任何方式文本你想使用一个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);
}
如果我理解正确,'#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