How can I replace part of a string with a span tag?

Asked Dec 08 '20 at 10:31

Active Dec 08 '20 at 10:31

Viewed 26 times

I am trying to see is the selected text has a set of words inside it and then replace it or surround it with the span tag on line 22.

<!DOCTYPE html>
<html>

<head>
    <title>Document</title>
    <style>
        .danger {
            color: red;
            font: bold;
        }
    </style>
</head>

<body>
    <p class="air-section"> blah blah blah This is dangerous blah blah
    </p>
</body>
<script>
    const section = document.querySelector('.air-section');
    if (section.textContent.includes('This is dangerous')) {
        console.log(section.innerText);
        section.textContent.replace(/This is dangerous/g, '<span class="air-text-entry air-entry danger" style="display: block; color: #E2E7E9; margin: 5px;">This is dangerous</span>');
    }
</script>

</html>

asked Dec 08 '20 at 10:31

html.hayden

I think there is missing an event handler and a trigger. – Reporter Dec 08 '20 at 10:37
`replace` doesn't modify anything. It *returns* a new string. You should assign it to `innerHTML`. See duplicate reference. – trincot Dec 08 '20 at 10:39
1

I have added a codepen for you: [codepen](https://codepen.io/dalholm/pen/OJRXwqZ?editors=1111) – Mikael Dalholm Dec 08 '20 at 10:44
I've added an event handler now. I've not done much on regex so I'm really struggling to put that reference into context. – html.hayden Dec 08 '20 at 10:51
Thank you Mikael, really appriecated – html.hayden Dec 08 '20 at 10:53

How can I replace part of a string with a span tag?

0 Answers0