如何使用jQuery来设置特定单词的所有实例的样式/部分/？
不寻常的情况。 我有一个客户，我们称之为“BuyNow”。 他们希望他们的网站副本中的每个名称的实例都像“立即购买”一样风格化，其中名称的后半部分以粗体显示。
我真的很讨厌花一天时间将标签添加到所有副本中。 使用jQuery有一个很好的方法吗？
我已经看到了jQuery的高亮插件，它非常接近，但我需要大胆的是该单词的后半部分。
为了可靠地执行此操作，您必须迭代文档中的每个元素以查找文本节点，并在其中搜索文本。 （这是插件在问题中提到的内容。）
这是一个允许RegExp模式匹配的纯JavaScript / DOM。 jQuery在这里并没有真正给你太多帮助，因为选择器只能选择元素，而’：contains’选择器是递归的，所以对我们来说不太有用。
// Find text in descendents of an element, in reverse document order // pattern must be a regexp with global flag // function findText(element, pattern, callback) { for (var childi= element.childNodes.length; childi-->0;) { var child= element.childNodes[childi]; if (child.nodeType==1) { findText(child, pattern, callback); } else if (child.nodeType==3) { var matches= []; var match; while (match= pattern.exec(child.data)) matches.push(match); for (var i= matches.length; i-->0;) callback.call(window, child, matches[i]); } } } findText(document.body, /\bBuyNow\b/g, function(node, match) { var span= document.createElement('span'); span.className= 'highlight'; node.splitText(match.index+6); span.appendChild(node.splitText(match.index+3)); node.parentNode.insertBefore(span, node.nextSibling); });
弹出正则表达式和replace() 。 就像是
var text = $([selector]).html(); text = text.replace(/Now/g,'Now<\strong>'); $([selector]).html(text);
使用html()执行此操作时要小心谨慎。 首先，有可能替换元素的href属性中的匹配字符串以及可能导致页面错误运行的其他属性。 有可能写一个更好的正则表达式来克服一些潜在的问题，但性能可能会受到影响（我不是正规表达大师）。 其次，使用html()替换内容将导致不可序列化的数据，例如绑定到被替换的元素标记的事件处理程序，表单数据等丢失。 编写仅定位文本节点的函数可能是更好/更安全的选项，它只取决于页面的复杂程度。
如果您可以访问HMTL文件，那么如果内容是静态的，那么最好对他们想要更改文件外观的单词进行查找和替换。 在大多数情况下， NotePad ++的 “ 在文件中查找”选项对此作业具有高效性。
使用SingleShot的建议并使用带有CSS类的将比使用元素提供更大的灵活性。
我写了一个小插件来做到这一点。 看看我对类似问题的回答。
我强烈建议您使用我编写的插件 – 而不是下载接受的答案中建议的插件 – 它的速度要快得多。
var Run=Run || {}; Run.makestrong= function(hoo, Rx){ if(hoo.data){ var X= document.createElement('strong'); X.style.color= 'red'; // testing only, easier to spot changes var pa= hoo.parentNode; var res, el, tem; var str= hoo.data; while(str && (res= Rx.exec(str))!= null){ var tem= res[1]; el= X.cloneNode(true); el.appendChild(document.createTextNode(tem)); hoo.replaceData(res.index, tem.length,''); hoo= hoo.splitText(res.index); str= hoo.data; if(str) pa.insertBefore(el, hoo); else{ pa.appendChild(el); return; } } } } Run.godeep= function(hoo, fun, arg){ var A= []; if(hoo){ hoo= hoo.firstChild; while(hoo!= null){ if(hoo.nodeType== 3){ if(hoo.data) A[A.length]= fun(hoo, arg); } else A= A.concat(arguments.callee(hoo, fun, arg)); hoo= hoo.nextSibling; } } return A; } //test **Run.godeep(document.body, Run.makestrong,/([Ee]+)/g);**
这不是一个jQuery脚本，而是纯javaScript，我相信它可以稍微修改一下。 链接 。