Question

不寻常的情况。我有一个客户，我们称之为“BuyNow”。他们希望他们的网站副本中的每个名称的实例都像“购买现在”一样风格化，其中名称的后半部分以粗体显示。

我真的很讨厌花一天时间添加＆lt; strong＆gt;标签到所有副本。有没有一种使用jQuery的好方法？

我已经看到了jQuery的高亮插件，它非常接近，但是我需要在该单词的后半部分加粗。

Answer 1

为了可靠地执行此操作，您必须迭代文档中的每个元素，以查找文本节点，并在其中搜索文本。（这是插件在问题中提到的内容。）

这是一个允许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);
});

Answer 2

正则表达式和replace()让人想起。像

这样的东西

var text = $([selector]).html();
text = text.replace(/Now/g,'<strong>Now<\strong>');
$([selector]).html(text);

使用html()执行此操作时要谨慎。首先，有可能替换href元素的<a>属性中的匹配字符串以及可能导致页面错误运行的其他属性。有可能编写一个更好的正则表达式来克服一些潜在的问题，但性能可能受损（我不是正则表达式大师）。其次，使用html()替换内容将导致不可序列化的数据（例如绑定到被替换的元素标记的事件处理程序，表单数据等）丢失。编写一个仅定位文本节点的函数可能是更好/更安全的选项，它只取决于页面的复杂程度。

如果您有权访问HMTL文件，那么如果内容是静态的，那么最好对他们想要更改文件外观的单词进行查找和替换。在大多数情况下，NotePad++的 在文件中查找 选项对此作业具有高效性。

使用SingleShot的建议并使用带有CSS类的<span>将比使用<strong>元素更具灵活性。

Answer 3

我写了一个小插件来做到这一点。看看my answer类似的问题。

我强烈建议您使用我编写的插件，而不是下载接受的答案中建议的插件，而且速度要快得多。

Answer 4

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);**

Answer 5

这不是一个jQuery脚本，而是纯javaScript，我相信它可以稍微修改一下。 Link

如何使用jQuery来设置特定单词的所有实例的样式/部分/？

5 个答案: