Question

我在JOOMLA建立一个网站，在这个网站上，我想把所有的字眼都放在＆＃34; Inovflow＆＃34;在网站上，在蓝色和upercase颜色。像这样＆＃34; INOVFLOW＆＃34;。

我将此代码放在网站的js文件夹中：

jQuery(document).fn.findText = function(params){
    var phrases = params.query, 
        ignorance = params.ignorecase;
        wrapper = $(this);
    var source = wrapper.html();
    selection_class_name = params.style;
    source = source.replace(/[\n|\t]+/gi, '');
    source = source.replace(/\s+/gi, ' ');
    source = source.replace(/> /gi, '>');
    source = source.replace(/(\w)</gi, function(m, w){return(w + " <");});

    phrases.forEach(function(str){

      var regexp = makeRegexp(str);
        source = source.replace(regexp, function (m){
          return (emulateSelection(m));
        });

    });

    wrapper.html(source);
    var res_array = wrapper.find("[search=xxxxx]") 
    return(res_array);
};



function makeRegexp(s){
  var space = '( )?(<span[^>]*>)?(</span[^>]*>)?( )?';
    var result = s.replace(/\s/gi, space);
    result = new RegExp(space + result + space, "gi");
    return(result);
}

function emulateSelection (htmlPiece){
  htmlPiece = htmlPiece.replace(/(?!=>)[^><]+(?=<)/g, function(w){
    return(wrapWords(w));}
  );
  htmlPiece = htmlPiece.replace(/^[^><]+/, function(w){
    return(wrapWords(w));}
  );  
  htmlPiece = htmlPiece.replace(/[^><]+$/, function(w){
    return(wrapWords(w));}
  );
  htmlPiece = htmlPiece.replace(/^[^><]+$/, function(w){
    return(wrapWords(w));}
  );

  return( htmlPiece );
}

function wrapWords(plainPiece){
  console.log("plain: " + plainPiece);
  var start = '<span search="xxxxx">',
    stop = '</span>';
  return(start + plainPiece + stop);
}


jQuery(document).each($('.container').findText({query: ['INOVFLOW']}), function (){
    $(this).addClass("changeColorInovflow");
});

在此之后，页面似乎进入了无限循环并且没有加载。如果不使用jQuery(document)我使用$.，JS会返回错误并且不会运行。

我做错了吗？

Answer 1

如果findText打算成为jQuery插件，则需要更新声明函数的方式。

$.fn.findText = function(params) {
  var phrases = params.query;
  // removed unused 'ignorance' var
  var wrapper = this; // this is already a jQuery object
  var source = wrapper.html();

  selection_class_name = params.style;
  source = source.replace(/[\n|\t]+/gi, '');
  source = source.replace(/\s+/gi, ' ');
  source = source.replace(/> /gi, '>');
  source = source.replace(/(\w)</gi, function(m, w){return(w + " <");});

  phrases.forEach(function(str){
    var regexp = makeRegexp(str);
    source = source.replace(regexp, function (m){
      return (emulateSelection(m));
    });
  });

  wrapper.html(source);
  var res_array = wrapper.find("[search=xxxxx]") 
  return this; // return 'this' to make it chainable
}

以下是相关文档：

https://learn.jquery.com/plugins/basic-plugin-creation/

然后，当您致电findText时，您可以使用更简单的选择器：

$('.container').each(function() {
    $(this).findText({query: ['INOVFLOW']}).addClass("changeColorInovflow");
});

原始代码不起作用，因为each()将函数或带回调的数组作为参数，而不是选择器。

.each()：http://api.jquery.com/each/

jQuery.each()：http://api.jquery.com/jquery.each/

想要将所有单词放在网站上，颜色为蓝色和大写

1 个答案: