jQuery插件不起作用:replaceText

时间:2014-10-13 21:47:41

标签: jquery

我正在按照教程使用herehere中的此插件,但我无法让它运行。

我尝试了最简单的代码,所以如果有拼写错误就很明显了。

你能告诉我哪里出错吗?

- 编辑 - 感谢您提出更改文本的其他选项。但是,这不是问题。请阅读我以前的帖子,为什么我需要这个插件:

CKEditor4: Make Text Differ from its HTMLOutput Text With Different HTML Format

这是 DEMO:

$(document).ready(function() {
		$('#test h1').replaceText(/\btext\b/gi, "TEXT" );
});
<!--jQuery 2.1.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- plugin link -->
<script src="https://raw.githubusercontent.com/cowboy/jquery-replacetext/master/jquery.ba-replacetext.js"></script>

<div id="test">
		<h1>text</h1>
</div>

3 个答案:

答案 0 :(得分:1)

您需要选择器搜索#test h1而不是#test

答案 1 :(得分:1)

您的代码段中的部分问题是插件src无法正常工作。如果你只是复制js文件中的内容并使用它:

$('#test *').replaceText("text", "TEXT");

然后它确实有用。

&#13;
&#13;
(function($) {
  '$:nomunge'; // Used by YUI compressor.

  // Method: jQuery.fn.replaceText
  // 
  // Replace text in specified elements. Note that only text content will be
  // modified, leaving all tags and attributes untouched. The new text can be
  // either text or HTML.
  // 
  // Uses the String prototype replace method, full documentation on that method
  // can be found here: 
  // 
  // https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Objects/String/Replace
  // 
  // Usage:
  // 
  // > jQuery('selector').replaceText( search, replace [, text_only ] );
  // 
  // Arguments:
  // 
  //  search - (RegExp|String) A RegExp object or substring to be replaced.
  //    Because the String prototype replace method is used internally, this
  //    argument should be specified accordingly.
  //  replace - (String|Function) The String that replaces the substring received
  //    from the search argument, or a function to be invoked to create the new
  //    substring. Because the String prototype replace method is used internally,
  //    this argument should be specified accordingly.
  //  text_only - (Boolean) If true, any HTML will be rendered as text. Defaults
  //    to false.
  // 
  // Returns:
  // 
  //  (jQuery) The initial jQuery collection of elements.

  $.fn.replaceText = function(search, replace, text_only) {
    return this.each(function() {
      var node = this.firstChild,
        val,
        new_val,

        // Elements to be removed at the end.
        remove = [];

      // Only continue if firstChild exists.
      if (node) {

        // Loop over all childNodes.
        do {

          // Only process text nodes.
          if (node.nodeType === 3) {

            // The original node value.
            val = node.nodeValue;

            // The new value.
            new_val = val.replace(search, replace);

            // Only replace text if the new value is actually different!
            if (new_val !== val) {

              if (!text_only && /</.test(new_val)) {
                // The new value contains HTML, set it in a slower but far more
                // robust way.
                $(node).before(new_val);

                // Don't remove the node yet, or the loop will lose its place.
                remove.push(node);
              } else {
                // The new value contains no HTML, so it can be set in this
                // very fast, simple way.
                node.nodeValue = new_val;
              }
            }
          }

        } while (node = node.nextSibling);
      }

      // Time to remove those elements!
      remove.length && $(remove).remove();
    });
  };

})(jQuery);

$(document).ready(function() {
  $('#test *').replaceText("text", "TEXT");
});
&#13;
<!--jQuery 2.1.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test">
  <h1>text</h1>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

试试这个:

Fiddle

$(document).ready(function() {
  $('h1').replaceText( "text", "TEXT" );
});