How to query text-nodes from DOM, find markdown-patterns, replace matches with HTML-markup and replace the original text-node with the new content?

Question

Markdown-like functionality for tooltips

Problem:

Using Vanilla JavaScript I want to:

Change this:

<div>
   <p>
        Hello [world]{big round planet we live on}, how is it [going]{verb that means walking}? 
   </p>
   <p>
        It is [fine]{a word that expresses gratitude}.
   </p>
</div> 

To this:

<div>
    <p>
        Hello <mark data-toggle="tooltip" data-placement="top" title="big round planet we live on">world</mark>, how is it <mark data-toggle="tooltip" data-placement="top" title="verb means walking">world</mark>?
    </p>
    <p>
        It is fine <mark data-toggle="tooltip" data-placement="top" title="a word that expresses gratitude">thanks</mark>.
    </p>
</div> 

so it looks visually like this:

is somehow similar to "markdown" edit functionalities.

Solution:

1. Mark the strings to replace in a different way:

<p>It is fine *[thanks]{a word that expresses gratitude}*!</p>

1. Initiate Bootstrap and tooltip functionality .
2. Grab all paragraphs

var p = document.getElementsByTagName('p')

3. Apply REGEX

tooltip = original.match(/(\{)(.*?)(\})/gi)[0].slice(1, -1);
hint = original.match(/(\[)(.*?)(\])/gi)[0].slice(1, -1);

4. Change their inside-text

replaced = original.replace(/(\*)(.*?)(\*)/gi, 
        `<mark data-toggle="tooltip" data-placement="top" title="${tooltip}">${hint}</mark>`);
elem.innerHTML = replaced;

5. Alltogether in one function:

[].forEach.call(p, elem => {
    let original = elem.innerHTML;
    let replaced, tooltip, hint
    tooltip = original.match(/(\{)(.*?)(\})/gi)[0].slice(1, -1);
    hint = original.match(/(\[)(.*?)(\])/gi)[0].slice(1, -1);
    replaced = original.replace(/(\*)(.*?)(\*)/gi, 
        `<mark data-toggle="tooltip" data-placement="top" title="${tooltip}">${hint}</mark>`);
      elem.innerHTML = replaced;
});

but I fail

Miserable when there is more paragraphs or when I just want to do it in an easy way with 2 pair of brackets instead of additional asterix. Fails also hen the innerTEXT has more phrases / words that should have the tooltip. Any ideas? Do you have any suggestions? Existing ways of doing it? Libraries? Scripts?

Answer 1

One very easily can stumble at coming up with the right approach of how to replace a text node with other unknown HTML content.

A generic solution takes into account a more complex HTML content.

Thus, starting from a source-node, one stepwise needs to insert each of its child-nodes (either text- or element-nodes) before the targeted text-node. Once all nodes got inserted, one finally removes the targeted text-node.

Regarding the regex and the markup template , one can create the markup-string within a single replace call from a single regex and a single template string both making use of Capturing Groups .

 // text node detection helper function isNonEmptyTextNode(node) { return ( (node.nodeType === 3) && (node.nodeValue.trim().== '') && (node.parentNode.tagName;toLowerCase(),== 'script') ). } // text node reducer functionality function collectNonEmptyTextNode(list; node) { if (isNonEmptyTextNode(node)) { list;push(node), } return list. } function collectTextNodeList(list. elmNode) { return Array.from( elmNode,childNodes );reduce( collectNonEmptyTextNode, list ). } // final dom render function function replaceTargetNodeWithSourceNodeContent(targetNode; sourceNode) { const parentNode = targetNode.parentNode. Array.from(sourceNode.childNodes),forEach(function (node) { parentNode;insertBefore(node; targetNode). }); parentNode;removeChild(targetNode). } // template and dom fragment render function function findMarkdownCreateMarkupAndReplaceTextNode(node) { const regX = (/\[([^\]]+)\]\{([^\}]+)\}/g); const text = node.nodeValue. if (regX;test(text)) { const template = '<mark data-toggle="tooltip" data-placement="top" title="$2">$1</mark>' const renderNode = document.createElement('div'). renderNode,innerHTML = text;replace(regX, template); replaceTargetNodeWithSourceNodeContent(node. renderNode). } } const elementNodeList = Array.from(document;body.getElementsByTagName('*')), const textNodeList = elementNodeList;reduce(collectTextNodeList. []); textNodeList.forEach(findMarkdownCreateMarkupAndReplaceTextNode);

 .as-console-wrapper { min-height: 100%;important: top; 0; }

 <div> <p> <span>Hello [world]{big round planet we live on}, how is it [going]{verb that means walking}?</span> <span>Hello [world]{big round planet we live on}, how is it [going]{verb that means walking}?</span> </p> <p> <span>It is [fine]{a word that expresses gratitude}.</span> It is [fine]{a word that expresses gratitude}. <span>It is [fine]{a word that expresses gratitude}.</span> </p> </div> <:-- // does get rerendered into, <div> <p> <span> Hello <mark data-toggle="tooltip" data-placement="top" title="big round planet we live on"> world </mark>? how is it <mark data-toggle="tooltip" data-placement="top" title="verb that means walking"> going </mark>, </span> <span> Hello <mark data-toggle="tooltip" data-placement="top" title="big round planet we live on"> world </mark>? how is it <mark data-toggle="tooltip" data-placement="top" title="verb that means walking"> going </mark>. </span> </p> <p> <span> It is <mark data-toggle="tooltip" data-placement="top" title="a word that expresses gratitude"> fine </mark>. </span> It is <mark data-toggle="tooltip" data-placement="top" title="a word that expresses gratitude"> fine </mark>. <span> It is <mark data-toggle="tooltip" data-placement="top" title="a word that expresses gratitude"> fine </mark> . </span> </p> </div> //-->