jQuery教程分享如何使用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, /bBuyNowb/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'); $([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,我相信它可以稍微修改一下。 链接 。

      以上就是jQuery教程分享如何使用jQuery来设置特定单词的所有实例的样式/部分/?相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注(猴子技术宅)。

      本文来自网络收集,不代表猴子技术宅立场,如涉及侵权请点击右边联系管理员删除。

      如若转载,请注明出处:https://www.ssfiction.com/jqyjc/546502.html

      发表评论

      电子邮件地址不会被公开。 必填项已用*标注