Swapping text for an image in Javascript

Question

I'm looking for a way that I can search an entire HTML document for a specific word and then swap each instance of that word with an image.

The problem I have is that I don't know what content is there because it is a dynamic page where the content is edited elsewhere and the site just pulls it in so referencing classes and ids is difficult.

I created a simple example with text that could resemble the content but the problem I have is my script will replace the whole document (I believe because of .html?) and I just want it to replace that specific piece of text.

<p>hi</p>
<p>j</p>


var x = $('body:contains("hi")');
        x.html('<img src="/Content/by_car.jpg" />');

Could someone point me in the right direction?

Thanks in advance

x.html(x.html().replace('hi', '<img src="/Content/by_car.jpg" />')); — Stan
– Stan, Commented Dec 10, 2015 at 11:14
You may want to do some regex to make sure that the "hi" you replace is not in a tag. If not you may end up with "<input type="<img src="/content/by_car.jpg" />dden"/> which would not render correctly in most browsers. — ghangas
– ghangas, Commented Dec 10, 2015 at 11:22

Stan · Accepted Answer · 2015-12-10 11:25:25Z

1

You need to replace the original html like so x.html(x.html().replace('hi', '<img src="/Content/by_car.jpg" />'));

Also, this will be bad if, for example you will have <p class="hiblo">hi</p>. In this canse it will replace hi in hiblo and hi inside p tag thus ruining your markup.

Generally you can use some kind of regex but it's still not recommended to parse html with regex.

answered Dec 10, 2015 at 11:25

Stan

26.7k55 gold badges169 silver badges249 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

scottdavidwalker Over a year ago

Thanks for the advice, the actual swapping images will use very specific codes and not generic words like "hi", I was just trying to give a simple example :-) Thanks for the solution though :-)

Alpesh Panchal · Accepted Answer · 2015-12-10 11:33:14Z

Here is working code.

This code also makes sure that script and style tags don't get replaced otherwise page logic will be broken. So it is taken care of as well.

<html>
<head>
    <script type="text/javascript" src="jquery-1.11.3.min.js" > </script>
    <style></style>
</head>
<body>
    <h1>hi</h1>
    <div>hi</div>

    <input type="button" onclick="return replaceWithImage()" value="replace with image"/>

    <script type="text/javascript">

        function replaceWithImage() {
            var x = $('body').find(':contains("hi")');

            x.each(function(){
                if($(this).prop('tagName') != 'SCRIPT' && $(this).prop('tagName') != 'STYLE')
                    $(this).replaceWith('<img src="/Content/by_car.jpg" />');



            });

            return false;

        }


    </script>

</body>
</html>

Collectives™ on Stack Overflow

Swapping text for an image in Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related