To wrap a part of innerHTML with new element

Question

Here is HTML on a forum:

username info

Here is how I need to change it by using a userscript:

username info

I know how to create an a element, assign it a custom attribute, and add it to DOM.

But I don't understand how to wrap username with it. That is, how to convert username from the 1st example to username in the second example.

edit: An a element will have href as well. I omitted it intentionally to make the code shorter.

user_7461381 · Answer

You can try replacing the innerHTML:

var el = document.querySelector('.sign');
el.innerHTML = el.innerHTML.replace('username', 'username');

username info

user_10669010 · Answer

this way ?

let parentElm = document.querySelector('div.sign')
  , refNod    = parentElm.childNodes[0] 
  ;
  
if ( refNod.nodeValue === 'username') 
  {
  let newNod = document.createElement('a')
  // newNod.href = '/...'
  newNod.setAttribute('itemprop','creator')
  newNod.textContent = refNod.nodeValue
 
  parentElm.replaceChild( newNod, refNod )
  }

/*****/
console.log( parentElm.innerHTML )

usernameinfo

user_3840170 · Answer

Doing this with vanilla DOM APIs is a little involved, but not too hard. You will need to locate the DOM text node which contains the fragment you want to replace, split it into three parts, then replace the middle part with the node you want.

If you have a text node textNode and want to replace the text spanning from index i to index j with a node computed by replacer, you can use this function:

function spliceTextNode(textNode, i, j, replacer) {
    const parent = textNode.parentNode;
    const after = textNode.splitText(j);
    const middle = i ? textNode.splitText(i) : textNode;
    middle.remove();
    parent.insertBefore(replacer(middle), after);
}

Adapting your example, you will have to use it something like this:

function spliceTextNode(textNode, i, j, replacer) {
    const parent = textNode.parentNode;
    const after = textNode.splitText(j);
    const middle = i ? textNode.splitText(i) : textNode;
    middle.remove();
    parent.insertBefore(replacer(middle), after);
}

document.getElementById('inject').addEventListener('click', () => { 
    const textNode = document.querySelector('div.sign').firstChild;
    const m = /\w+/.exec(textNode.data);
    spliceTextNode(textNode, m.index, m.index + m[0].length, node => {
        const a = document.createElement('a');
        a.itemprop = 'creator';
        a.href = 'https://example.com/';
        a.title = "The hottest examples on the Web!";
        a.appendChild(node);
        return a;
    })
}, false);

/* this is to demonstrate other nodes underneath the  are untouched */
document.querySelector('.info').addEventListener('click', (ev) => {
    ev.preventDefault();
    alert('hello');
}, false);

@username: haha, click me too

Note how the ‘click me too’ handler is still attached to the link after the ‘username’ link is injected; modifying innerHTML would fail to preserve this.

user_4207533 · Answer

Find all elements with class .sign and replace it's inner HTML with a wrapped text before the span tag.

var elms = document.querySelectorAll('.sign');
for (var i = 0; i < elms.length; i++) {
  let item = elms[i];
  var html = item.innerHTML;
  item.innerHTML = html.replace(/(.*)?$1


username info
other name info
other more and more info



A little bit of regex saves the day sometimes.
If you want to preserve event attached to the span element-


var elms = document.querySelectorAll('.sign');
elms.forEach(item => {
  let span = item.querySelector('span');
  var html = item.innerHTML;
  let txt = html.match(/(.*)?${txt}`;
  item.appendChild(span);
});

To wrap a part of innerHTML with new element

4 Answers