在 Greasemonkey 脚本中强制使用 jQuery 自动换行？答案

【问题标题】：Forcing word-wrap with jQuery in a Greasemonkey script?在 Greasemonkey 脚本中强制使用 jQuery 自动换行？
【发布时间】：2013-10-04 04:13:39
【问题描述】：

我正在编写一个将 jQuery 用于论坛的 GreaseMonkey 脚本。我试图强制帖子中的长词中断，以避免拉长页面。

原来我是这样的：

        $('.post').html(function(i, v) {
            var edited = false;
            // Break tags, links, and line breaks into separate 
            var words = v.replace(/<span(.+)<\/script\>/gi, " ").replace(/\</ig, " ").replace(/http:[^ ]+/gi, " ").replace(/&[^;]+;/gi, " ").replace(/[\n|\r]/g, " ").split(" ");
            for (var ii = 0; ii < words.length; ii++) {
                if (words[ii].length > word_length) {
                    edited = true;
                    v = v.replace(words[ii], insert_breaks(words[ii]));
                }
            }
            if (edited) return v;
        });

该网站在每个帖子中自然有不同的元素（例如粗体标签、锚点等），所以我把它们去掉，只留下文本，然后我检查词长（之前定义），并将词替换为它的破损部分。有些帖子会包含一些 JavaScript，格式类似于 <span>...</span><script>...</script>，这就是为什么我使用你看到的第一个替换。

我遇到的问题是，当一个词被破坏并且我返回 v 时，元素中包含的本机 JavaScript 被破坏，并且 GreaseMonkey 脚本在替换元素的 HTML 后停止。

我不知道如何使用 CSS word-break，因为我需要设置一个宽度——我不能为每个用户设置一个宽度，而且我不能信任页面加载时的宽度.

【问题讨论】：

标签： javascript jquery greasemonkey

【解决方案1】：

找到了解决办法。我发现的最好方法是循环遍历元素中的每个节点，如果它是文本节点，则从那里修改文本。这是它的要点：

    function insert_breaks(mtext) {
        if (mtext.length <= word_length) {
            return mtext;
        } else {
            mresult = mtext.substr(0, word_length) + " ";
            var newsection = mtext.substr(word_length);
            return mresult + insert_breaks(newsection);
        }               
    }

    function checkTextNodes(node) {
        if (node.nodeType == 3) {
            var v = node.nodeValue;
            var edited = false;
            var words = v.split(" ");
            for (var ii = 0; ii < words.length; ii++) {
                if (words[ii].length > word_length) {
                    edited = true;
                    v = v.replace(words[ii], insert_breaks(words[ii]));
                }
            }       
            if (edited) node.nodeValue = v; 
        } else {
            for (var i = 0; i < node.childNodes.length; i++) {
                checkTextNodes(node.childNodes[i]); 
            }
        }
    }

    function word_break() { 
        $('.post').contents().each(function() {
            checkTextNodes(this);
        });         
    }

【讨论】：