javascript - 删除线功能

Question

我想删除网页上的内容。有些内容是文本，其他内容是链接......并且我需要一个可以删除它的功能。

找到了这个很好的答案:How do I animate a strike through effect using JavaScript on a piece of text? (第二个答案) 但我想把它转变成一个函数，这样我就可以在任何地方使用它了。

他原来的jsfiddle:http://jsfiddle.net/alexdickson/wmBYx/

这是他的 JS:

var findText = function(element, pattern, callback) {

    if ( ! element.childNodes) {
      return;   
    }
    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, /./g, function(node, match) {
    var element = document.createElement('span');
    node.splitText(match.index + 1);
    element.appendChild(node.splitText(match.index));
    node.parentNode.insertBefore(element, node.nextSibling);
});

var spans = document.getElementsByTagName('span'),
    spansLength = spans.length,
    currentSpan = 0,
    interval = setInterval(function() {
        if (currentSpan == spansLength) {
            clearInterval(interval);
        }
        spans[currentSpan++].style.textDecoration = 'line-through';

    }, 100); 

说实话，我什么都不懂，所以我不知道如何将其转换为 DRY 函数。 (甚至不会向你展示我到目前为止所得到的，我很羞愧)。

感谢您的帮助

PS:我使用的是jquery，所以非常欢迎您在其中添加一些。

Answer 1

您可以为其创建一个 jQuery 插件:

$.fn.strikeThrough = (function() {

    var findText = function(element, pattern, callback) {

        if ( ! element.childNodes) {
          return;   
        }

        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]);
            }
        }
    }

    return function(pattern) {
        pattern = pattern || /./g;

        if (this.length > 1) {
            this.each(function() {
                $(this).strikeThrough(pattern);
            });
            return this;
        }

        findText(document.body, pattern, function(node, match) {
            var element = document.createElement('span');
            node.splitText(match.index + 1);
            element.appendChild(node.splitText(match.index));
            node.parentNode.insertBefore(element, node.nextSibling);
        });

        var spans = this[0].getElementsByTagName('span'),
            spansLength = spans.length,
            currentSpan = 0,
            interval = setInterval(function() {
                if (currentSpan == spansLength) {
                    clearInterval(interval);
                    return;
                }
                spans[currentSpan++].style.textDecoration = 'line-through';

            }, 100);

        return this;
    };

})();

$(function() {
    $('div').strikeThrough();
});

HTML:

<div>strike me out please but <strong>don't</strong> drop my events!</div>

Demo