Replacing word by another word in certain cases

Question

I am trying to write a JavaScript function which replaces a certain word by another word in an element and all its child elements.

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<script>
function replaceText(from, to, id) {
    var text = document.getElementById(id).innerHTML;
    text = text.replace(new RegExp(from, "g"), to);

    document.getElementById(id).innerHTML = text;
}

window.onload = function() {
    replaceText("Text", "Tekst", "test");
}
</script>
</head>
<body>
<!-- This div should look the same as... -->
<div id="test"><p title="lorem Text ipsum">lorem <span>Text ipsum</span> dolor sit TextText amet, consectetur text adipiscing elit, bla-Text sed do eiusmod blaText <b>Text</b> tempor incididunt <a href="/Text">Text</a> ut labore et dolore magna Text aliqua.</p></div>

<!-- ... as this div in the browser. -->
<div><p title="lorem Text ipsum">lorem <span>Tekst ipsum</span> dolor sit TextText amet, consectetur text adipiscing elit, bla-Tekst sed do eiusmod blaText <b>Tekst</b> tempor incididunt <a href="/Text">Tekst</a> ut labore et dolore magna Tekst aliqua.</p></div>
</body>
</html>

The code already works, but it also replaces a few instances of the word "Text" that it shouldn't replace. It shouldn't replace it if it's a part of another word ("TextText"), but it should replace it if there is a special character right before ("bla-Text") or after it. It also shouldn't change the content of HTML attributes, such as "href".

Can this problem solved with one regular expression or do I need more code to solve this problem?

Short answer, you can solve this with a regex. You just need to prepend and post pend your `from` with your pattern which is likely [start of line | special character | white space] + `from` + [white space | end of line] — generalhenry, Apr 02 '18 at 22:33
If you don't want it to touch html attributes, you need to process text nodes instead. — some, Apr 02 '18 at 23:07

score 2 · Answer 1 · answered Apr 04 '18 at 11:04

I got a solution and changed the code a little bit:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="UTF-8">
    <script>
        function replaceText(regex, to, id) {
            var text = document.getElementById(id).innerHTML;
            text = text.replace(new RegExp(regex, "g"), to);

            document.getElementById(id).innerHTML = text;
        }

        window.onload = function() {
            var regex = /\bText\b/;
            replaceText(regex, "Tekst", "test");
        }
    </script>
</head>
<body>
<!-- This div should look the same as... -->
<div id="test"><p title="lorem Text ipsum">lorem <span>Text ipsum</span> dolor sit TextText amet, consectetur text adipiscing elit, bla-Text sed do eiusmod blaText <b>Text</b> tempor incididunt <a href="/Text">Text</a> ut labore et dolore magna Text aliqua.</p></div>

<!-- ... as this div in the browser. -->
<div><p title="lorem Text ipsum">lorem <span>Tekst ipsum</span> dolor sit TextText amet, consectetur text adipiscing elit, bla-Tekst sed do eiusmod blaText <b>Tekst</b> tempor incididunt <a href="/Text">Tekst</a> ut labore et dolore magna Tekst aliqua.</p></div>
</body>
</html>

I hope it helped :)

That's true but the problem is that JavaScript doesn't support negative lookbehind right now and this is what we would need here, look here: https://stackoverflow.com/questions/30118815/why-are-lookbehind-assertions-not-supported-in-javascript. So you should not use the href text as normal text in tags — Dyragor, Apr 13 '18 at 13:47

Replacing word by another word in certain cases

1 Answers1