Pure JavaScript - edit text in DOM element without touching child elements

Question

I'm currently trying to edit the text of all child elements of a single parent element. The structure is something along the lines of:

<section id=emoji>
        <h1>Emojies</h1>
        <p id=ea1>:-)</p>
        <p id=ea2>(TM)</p>
        <p id=ea3>Trademark(TM) <span>:-</span>)</p>
        <p id=ea4>Do you &lt;3 me?</p>
        <p id=ea5>:-):-):-)&lt;3&lt;3&lt;3</p>
</section>

As you can see, the third paragraph tag has a span tag. I have a function that will take a given string and convert all instances of an emoji symbol to a specified emoji within the emojify function. I want to dynamically do the same to these elements within the section . The problem is I don't want to edit the span , and at the minute, incorporating the span tag will generate a smiley face, which I don't want to do.

My emoji function looks like this:

function emojify(str) {
    let emojies = [];
    emojies['(TM)'] = '™️';
    emojies['<3'] = '❤️';
    emojies[':-)'] = '😀';

    emojies.forEach(function(el) {
        if (str.indexOf(el) > -1) {
            str = str.split(el).join(emojies[el]);
        }
    });

    return str;
}

This is my current function for trying to dynamically do this:

function pageEmojify(selector) {
    let element = document.querySelector(selector);
    element.childNodes.forEach(function(el) {
        el.textContent = emojify(el.textContent);
    });
}

It works, I just need it to not include the span tag in any conversion.

I have looked at various questions here on StackOverflow however all seem to use jQuery which I don't want to use for this particular problem.

For example: How to only change the text in a DOM element without replacing any child elements

How can I edit my pageEmojify function to do this?

Answer 1

 function emojify(str) { let emojies = []; emojies['(TM)'] = '™️'; emojies['<3'] = '❤️'; emojies[':-)'] = '😀'; for (let el of Object.keys(emojies)) { if (str && str.indexOf(el) > -1) { str = str.split(el).join(emojies[el]); } } return str; } function pageEmojify(selector) { let element = document.querySelector(selector); element.childNodes.forEach(function(el) { if (el.childNodes) { el.childNodes.forEach(function(elm) { elm.nodeValue = emojify(elm.nodeValue) }) } else el.textContent = emojify(el.textContent); }); } pageEmojify('section'); 

 <section id='emoji'> <h1>Emojies</h1> <p id='ea1'>:-)</p> <p id='ea2'>(TM)</p> <p id='ea3'>Trademark(TM) <span>:-</span>)<span>:-</span>)</p> <p id='ea4'>Do you &lt;3 me?</p> <p id='ea5'>:-):-):-)&lt;3&lt;3&lt;3</p> </section> 

Check for nodeValue of node to get that value for the given element. If any other nodes are there loop through that array to get all other node content.

Answer 2

If you check in the properties of your page (in chrome dev tool, go to element, click on an element and go to view properties in the right side), you can see that there is a 'text' node in each of you

element . In case of the

element whoc has span in it, it will show that there are 3 element - text, span and a text - in it. You can modiy you function to process only teh text nodes in it. It would be like

function pageEmojify(selector) {
    let element = document.querySelector(selector);
    element.childNodes.forEach(function(el) {
        ## get child nodes of e
        ## if teh childnode is of type text, then get innertext and pass it to emojify  
    });
}

I m giving the pseudo code here, as im not an expert in js functions.