javascript - jQuery find/replace without changing original text

Question

Welcome To Ask or Share your Answers For Others

javascript - jQuery find/replace without changing original text

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

Is there a way in jQuery to find a string of text in jQuery and not replace it with something else but wrap that text with an element so when the script is finished it spits out the original text with the string of text wrapped.

Example:

Original Text

"Hello world to all people"

Search string

"world to"

Replace with <i></i>

Final output

"Hello <i>World to</i> all people"

Thanks in advance for the help!

Kind of working code:

function highlightChild(child) {
        $(childElements[child]).text("");
        console.log(child);
        $('.child_element_' + child).bind('textselect', function(e){
            var selection = e.text;
            var str = $("#construct_version").text();
            var wrap = jQuery(childElements[child]).text(selection);
            var re = new RegExp("" + selection + "", "g");

            console.log(str.replace(selection, function(match, key, val){
                console.log(match);
                console.log(key);
                console.log(val);
                jQuery(childElements[child]).text(val)
            }));
        });
    }

The above code does the replace but where it actually does the replace it shows as undefined.

So if the original string is Hello world to all and I am wanting to replace world to with <b>world to</b>, it shows in the console.log as Hello undefined all

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

121 views

1 Answer

深蓝 · Answer 1 · 2021-10-23T17:51:26+0000

Altering page content is not, in general, as simple as replacing the html() markup with regex. All such attempts will fail where there is matched text in the markup itself, can fail when the browser chooses to serialise its DOM in a way that doesn't meet your expectations, and at best, when it does work, still forces you to serialise and re-parse all searched text, which is slow and destroys all non-serialisable information, such as form field values, JavaScript references and event handlers. You can get away with that for simple low-level elements, but against a container like <body> it'd be awful.

Better: instead of hacking at an HTML string, stick with the live DOM nodes, searching for Text nodes that match your requirements and doing the replacements on the straight text node data. Here's some plain JS code to do that (I guess you could put it in a plugin if you wanted.)

// Utility function to find matches in an element's descendant Text nodes,
// calling back a function with (node, match) arguments. The `pattern` can
// be a string, for direct string matching, or a RegExp object (which must
// be a `g`lobal regex.
//
function findText(element, pattern, callback) {
    for (var childi= element.childNodes.length; childi-->0;) {
        var child= element.childNodes[childi];
        if (child.nodeType==1) {
            var tag= child.tagName.toLowerCase();
            if (tag!=='script' && tag!=='style' && tag!=='textarea')
                findText(child, pattern, callback);
        } else if (child.nodeType==3) {
            var matches= [];
            if (typeof pattern==='string') {
                var ix= 0;
                while (true) {
                    ix= child.data.indexOf(pattern, ix);
                    if (ix===-1)
                        break;
                    matches.push({index: ix, '0': pattern});
                }
            } else {
                var match;
                while (match= pattern.exec(child.data))
                    matches.push(match);
            }
            for (var i= matches.length; i-->0;)
                callback.call(window, child, matches[i]);
        }
    }
}

Example usage with a plain string search term:

// Replace “World to” string in element text with <i>-wrapped version
//
var element= $('#construct_version')[0];
findText(element, 'World to', function(node, match) {
    var wrap= document.createElement('i');
    node.splitText(match.index+match[0].length);
    wrap.appendChild(node.splitText(match.index));
    node.parentNode.insertBefore(span, node.nextSibling);
});

Categories

javascript - jQuery find/replace without changing original text

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags