Javascript userscript - Find and replace: textnodes and HTML

Question

I'm trying to create a userscript (Tampermonkey) to add some helper buttons into a site and originally I was using the script below based on the one posted here.

setInterval(function() {

//RegEx for finding any string of digits after "ID: " up to the next space
var myRegexp = /ID:\s(\d*?)\s/gi;

];
var txtWalker   = document.createTreeWalker (
    document.body,
    NodeFilter.SHOW_TEXT,
    {   acceptNode: function (node) {
            //-- Skip whitespace-only nodes
            if (node.nodeValue.trim() )
                return NodeFilter.FILTER_ACCEPT;

            return NodeFilter.FILTER_SKIP;
        }
    },
    false
);
var txtNode     = null;

while (txtNode  = txtWalker.nextNode () ) {
    var oldTxt  = txtNode.nodeValue;

    //Find all instances
    match = myRegexp.exec(oldTxt);

    while (match != null) {

        //Get group from match
        var idNum = match[1]

        //Replace current match with added info
        oldTxt = oldTxt.(idNum, idNum+"| <SomeHTMLHere> "+idNum+"    | ");

        //Update text
        txtNode.nodeValue = oldTxt;

        //Check for remaining matches
        match = myRegexp.exec(oldTxt);
    }
}

}, 5000);

Now I would like to add a bit more functionality to the text, probably something clickable to copy to clipboard or insert elsewhere. Now I know I'm working with text nodes in the original script but I wanted to know if there was anyway of adapting the current script to insert HTML at these points without rewriting from scratch.

The main problem with the site is these ID:##### values I'm search for all appear within the same element like below so I could simply find them by element (or at least not with my limited JS knowledge).

<div>
ID: 1234567 | Text
ID: 45678 | Text
</div>

If someone could point me in the right direction that'd be great or at least tell me it isn't possible without a rewrite.

score 0 · Accepted Answer · answered Oct 13 '18 at 22:12

Okay, so rewriting it actually worked out pretty well. Works much more nicely and is more succinct. Hopefully this will help someone in the future. If anyone wants to suggest any improved, please feel free!

setInterval(function() {

//Regex
var reg = /ID:\s(\d*?)\s/gi;
var result;

//Get all classes that this applies to
$('.<parentClass>').each(function(i, obj) {
    var text = $(this).html();

    //Do until regex can't be found anymore
    while (result = reg.exec(text)) {

        //Get first regex group
        var str = result[1];
        //Add in desired HTML
        var newhtml = $(this).html().replace(str, '|<span class="marked">' + str + '</span>|');
        //Replace
        $(this).html(newhtml);
    }
});

//Click function for added HTML
$(".marked").click(function(){

    //Get text inside added HTML
    var id = $(this).text();
    //Construct desired string
    var Str = "someText " + id;
    //Insert into message box
    textarea = document.querySelector('.<inputArea>')
    textarea.value = Str;
    textarea.focus();
});

}, 5000);

Javascript userscript - Find and replace: textnodes and HTML

1 Answers1