Agnostic way to match and wrap all strings in body (Without having to know the html structure)

Question

I have a file strings.json which contains

{
  "fname": "First Name",
  "lname": "Last Name",
  "email": "Email"
}

I have another file index.html which contains

  First name <input type="text" name="fname">
  Last name 
  Email 

If the html file contains a string that exists in the json file, I'd like to wrap it with a span and data-attribute, using Javascript or JQuery, for example:

 <span data-string="fname">First name</span><input type="text" name="fname">
 <span data-string="lname">Last name</span>
 <span data-string="email">Email</span>

I don't want solutions like this question, my question is a lot similar but the key difference is that I want an agnostic code, that will work without knowing the structure of the html,and I don't want regex that is specific for one structure either.

You just give it string in body, it wraps all the results in a span like shown above and that's it. I haven't found an agnostic way yet. Another example is this question, not agnostic either, you have to know the html structure for it to work.

Markjs didn't work for 2 reasons:

• I want to use it to select strings, it's highlighting them and I don't know how to turn highlight off

• More importantly :

  var myString = $("body").mark("Hi");
  console.log(myString);
  // returns
  
  translate.html:17 r.fn.init(1)0: bodyaLink: ""accessKey: ""assignedSlot: nullattributes: NamedNodeMap {length: 0}background: ""baseURI: "file:///home/elie/Desktop/csc/translate.html"bgColor: ""childElementCount: 7childNodes: (14) [text, h1, br, text, mark, text, script, text, script, text, script, text, script, text]children: (7) [h1, br, mark, script, script, script, script]classList: [value: ""]className: ""clientHeight: 88clientLeft: 0clientTop: 0clientWidth: 1264contentEditable: "inherit"dataset: DOMStringMap {}dir: ""draggable: falsefirstChild: textfirstElementChild: h1hidden: falseid: ""innerHTML: "↵   <h1><mark data-markjs="true">Hi</mark>,</h1><br>↵   T<mark data-markjs="true">hi</mark>s is the text that will be translated↵↵↵<script src="jquery-3.2.1.min.js"></script>↵<script src="jquery.mark.min.js"></script>↵<script src="jquery.localize.min.js"></script>↵↵<script type="text/javascript">↵var myString = $("body").mark("Hi");↵console.log(myString);↵</script>↵↵"innerText: "Hi,↵↵↵This is the text that will be translated"isConnected: trueisContentEditable: falselang: ""lastChild: textlastElementChild: scriptlink: ""localName: "body"namespaceURI: "http://www.w3.org/1999/xhtml"nextElementSibling: nullnextSibling: nullnodeName: "BODY"nodeType: 1nodeValue: nullnonce: ""offsetHeight: 88offsetLeft: 0offsetParent: nulloffsetTop: 0offsetWidth: 1264onabort: nullonauxclick: nullonbeforecopy: nullonbeforecut: nullonbeforepaste: nullonbeforeunload: nullonblur: nulloncancel: nulloncanplay: nulloncanplaythrough: nullonchange: nullonclick: nullonclose: nulloncontextmenu: nulloncopy: nulloncuechange: nulloncut: nullondblclick: nullondrag: nullondragend: nullondragenter: nullondragleave: nullondragover: nullondragstart: nullondrop: nullondurationchange: nullonemptied: nullonended: nullonerror: nullonfocus: nullongotpointercapture: nullonhashchange: nulloninput: nulloninvalid: nullonkeydown: nullonkeypress: nullonkeyup: nullonlanguagechange: nullonload: nullonloadeddata: nullonloadedmetadata: nullonloadstart: nullonlostpointercapture: nullonmessage: nullonmessageerror: nullonmousedown: nullonmouseenter: nullonmouseleave: nullonmousemove: nullonmouseout: nullonmouseover: nullonmouseup: nullonmousewheel: nullonoffline: nullononline: nullonpagehide: nullonpageshow: nullonpaste: nullonpause: nullonplay: nullonplaying: nullonpointercancel: nullonpointerdown: nullonpointerenter: nullonpointerleave: nullonpointermove: nullonpointerout: nullonpointerover: nullonpointerup: nullonpopstate: nullonprogress: nullonratechange: nullonrejectionhandled: nullonreset: nullonresize: nullonscroll: nullonsearch: nullonseeked: nullonseeking: nullonselect: nullonselectstart: nullonstalled: nullonstorage: nullonsubmit: nullonsuspend: nullontimeupdate: nullontoggle: nullonunhandledrejection: nullonunload: nullonvolumechange: nullonwaiting: nullonwebkitfullscreenchange: nullonwebkitfullscreenerror: nullonwheel: nullouterHTML: "<body>↵ <h1><mark data-markjs="true">Hi</mark>,</h1><br>↵   T<mark data-markjs="true">hi</mark>s is the text that will be translated↵↵↵<script src="jquery-3.2.1.min.js"></script>↵<script src="jquery.mark.min.js"></script>↵<script src="jquery.localize.min.js"></script>↵↵<script type="text/javascript">↵var myString = $("body").mark("Hi");↵console.log(myString);↵</script>↵↵</body>"outerText: "Hi,↵↵↵This is the text that will be translated"ownerDocument: documentparentElement: htmlparentNode: htmlprefix: nullpreviousElementSibling: headpreviousSibling: textscrollHeight: 88scrollLeft: 0scrollTop: 0scrollWidth: 1264shadowRoot: nullslot: ""spellcheck: truestyle: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}tabIndex: -1tagName: "BODY"text: ""textContent: "↵  Hi,↵    This is the text that will be translated↵↵↵↵↵↵↵↵var myString = $("body").mark("Hi");↵console.log(myString);↵↵↵"title: ""translate: truevLink: ""__proto__: HTMLBodyElementlength: 1prevObject: [document]__proto__: Object(0)
  

I want console.log to return Hi

Answer 1

Dave Gilem's replacer is a good start, but you need to recursively traverse through the DOM and apply it only to text nodes. This solution relies on jQuery. While DOM traversing using jQuery.each() is much slower, it's by far the easiest way to create a new HTML node in place of a matching string.

/**
  * replace text with <span> according to the wrapList
  * @param {Object} $elem jQuery DOM Object of a text node
  */
function replaceText($elem) {
    var pattern,
        textcontent  = $elem.text(),
        wrapList = {
            "fname": "First name",
            "lname": "Last name",
            "email": "Email"
            };

    for (const key in wrapList) {
        if (wrapList.hasOwnProperty(key)) {
            pattern = new RegExp(wrapList[key], 'g');
            // as we do a DOM manipulation, we only want to do it if necessary
            if (pattern.test(textcontent)) {
                // replace the text node with new text. $& in JS equals $0 in other languages
                textcontent = textcontent.replace(pattern,'<span data-string="'+key+'">$&</span>');
            }            
        }
    }
    // a change has been made
    if (textcontent != $elem.text()) {
        $elem.replaceWith(textcontent);
    }
}

/**
  * loop through DOM nodes recursively and call replaceText() on text nodes
  * @param {Object} $elem jQuery DOM Object
  */
function replaceRecursive($elem) {
    // get the nodeType of the object's DOM node
    var nt = $elem.get(0).nodeType;
    if (nt === 3) {
        // type 3 is a text node: replace the text
        replaceText($elem);
    } else if(nt === 1) {
        // type 1 is a DOM element: loop through the child objects recursively
        $elem.contents().each(function () {
            replaceRecursive($(this));
        });
    }
}

// start with the <body> tag
replaceRecursive($('body'));

jsfiddle

EDIT: There was a bug: Using replaceWith() in the for loop always updated the content. If there were multiple occurrences of search terms in the node, it only replaced the last one.

Answer 2

Similar to what xdumaine posted but a little more modular.

<div class='container'>
    First name <input type="text" name="fname">
    Last name 
    Email
  </div>

and calling the following function

function checkWrap($targetEl){
    var element, newText, pattern,
        wrapList = {
            "fname": "First name",
            "lname": "Last name",
            "email": "Email"
            },
        targetStr = $targetEl.html();
    for (const key in wrapList) {
        if (wrapList.hasOwnProperty(key)) {
            element = wrapList[key];
            pattern = new RegExp(element, 'g');
            newText = targetStr.replace(pattern, '<span data-string="'+key+'">'+element+'</span>');
            targetStr = newText;
        }
    }
    $targetEl.html(newText);
}
checkWrap($(".container"));

Should accomplish what you're after and allow you to decide to taget the whole body, a single element, or a set of elements by changing the taget elemnt you pass to the function call. (may need some optimization to the method but you should get the idea).

Answer 3

You can modify the document's body's innerHTML property.

document.body.innerHTML = document.body.innerHTML.replace(myString, '<span data-string="' + myKey + '">' + myString + '</span>');

Note that for this to be global, you'd need a regex instead of a string for the first param to replace, but you can make it a generic one with no need to be specific to the page structure.