Jquery replace html

517 Views Asked by Dave Bosman At 20 October 2024 at 21:41

In confluence I need to change text on a page into an image Inside of a table i have multiple values that need to be replaced by an image. So i created following Jquery and put it into a usermacro.

<script>
AJS.toInit(function() {
AJS.$("body").html($("body").html().replace(/text to be replaced/g,'<img src="image.png">'))
});
</script>

This works fine to change the text with the image. But it breaks the left menu when put in a macro. When i run the line AJS.$("body")... directly in developer tools in the console from google chrome it does not break the menu.

I can't seem to figure out how to solve this. Anyone have an idea?

Original Q&A

There are 2 best solutions below

Sagar Gorasiya On 10 October 2016 at 11:31

$(document).ready(function(){   
    $("#btn2").click(function(){
 var a= $("#a").html();
     a=a.replace('<i> with Italic</i>','<u> with UnderLine</u>');   
        alert("HTML: " + $("#a").html());
 $("#a").html(a);
        alert("HTML: " + a);
    });
});

<html>
  <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></head>
  <body>
  <div id ='a'>
This is a div<i> with Italic</i></br>
<b>and bold</b>
</div>

<button id="btn2">Show HTML</button>
  </body>
  </html>

Artem Gorlachev On 10 October 2016 at 11:48

If you need to chenge text only inside content in confluence you need to change the content of #main div:

AJS.$("#main").html($("#main").html().replace(/text to be replaced/g,'<img src="image.png">'))

I think you break menu confluence js.

Jquery replace html

There are 2 best solutions below

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CONFLUENCE

Related Questions in ATLASSIAN-UI

Trending Questions

Popular # Hahtags

Popular Questions