在Greasemonkey脚本中使用jQuery强制换行？

Question

I'm writing a GreaseMonkey script that utilizes jQuery for a forum. I'm trying to force long words in posts to break, to avoid stretching the page.

Originally I had something like this:

        $('.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;
        });

The site naturally has different elements within each post (eg bold tags, anchors, etc), so I stripped them out to leave only the text, which I then check for word length (defined earlier), and replace the word with its broken part. Some posts will contain some JavaScript, formatted like <span>...</span><script>...</script> , which is why I use that first replace that you see.

The issue I'm having is that, when a word is broken and I return v , the native JavaScript contained in the element is broken, and the GreaseMonkey script halts after replacing the HTML for the element.

I don't see how I can use the CSS word-break , since I would need to set a width -- something I can't set for every user, and since I can't trust the width at page load.

Answer 1

Found a solution. The best way I found is to cycle through each node in the element, and if it's a text node, then modify the text from there. Here's the gist of it:

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