CODEWITHSUNDEEP
javascriptjqueryhtml
Justin Erswell
Justin Erswell

Reputation: 708

Convert On Page text to HTML

I have some text on a web page that I would like to render in to HTML. The text looks like this:

<p>
    <span style="font-family: Arial">
        <span style="font-size: x-small">
            <img border="5" hspace="10" alt="" align="left" width="200" height="150" src="/Solutions/image/Lighthouse.jpg" />

I would like to show it as HTML ie. with the elements rendered correctly. It is set into a span with an ID:

<span class="VIEWBOX" id="_Datasoln_solutiondetails">

How can this be achieved using jQuery or Javascript?

Upvotes: 0

Views: 184

Answers (2)

Shawn Spencer
Shawn Spencer

Reputation: 1460

Are you saying that the rendered HTML on your page looks like this, when the page has loaded?

<p>
  <span style="font-family: Arial">
    <span style="font-size: x-small">
       <img border="5" hspace="10" alt="" align="left" width="200" height="150" src="/Solutions/image/Lighthouse.jpg" />
    [missing /span]
  [missing /span]
[missing /p]

Or is that just the html or text that gets prepared somewhere in your programming/scripting process?

To answer this question, I presume you already have that text/html somewhere on your web page.

So in that case, if you can't control how the above html snippet gets on your page, you could get jQuery to transform the code. And there will be some Kung-Fu fighting,

Are you saying that you already have the SPAN with the ID? Or would you inject (or append it) to the existing HTML?

<span class="VIEWBOX" id="_Datasoln_solutiondetails">

For now, I'm guessing the SPAN with the ID does not yet exist. In that case, do something along these lines:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Library Contents</title>
  <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
  <script type="text/javascript">
     $(document).ready(function(){
 // GET THE IMAGE AS A REFERENCE POINT
 var x = $("img[src='/Solutions/image/Lighthouse.jpg']");
 // TEST
//      $(x).hide();

//  GET THE IMAGE HTML TAG
var htmlStr = $(x).parent().html();
//  TEST
console.log("htmlStr: " + htmlStr);

//  DESIRED HTML
var newHtml = '<span class="VIEWBOX" id="_Datasoln_solutiondetails">' + htmlStr + '</span>';
//  TEST
// console.log("newHtml: " + newHtml);
$(x).parent().parent().replaceWith(newHtml);
 });  
 </script>
</head>
<body>
  <p>
    <span style="font-family: Arial">
      <span style="font-size: x-small">
        <img border="5" hspace="10" alt="" align="left" width="200" height="150" src="/Solutions/image/Lighthouse.jpg" />
      </span>
    </span>
  </p>
</body>
</html>

Upvotes: 1

Ian Jamieson
Ian Jamieson

Reputation: 4816

You can use regular expressions to do this, with javascript:

varname.replace(/<(span|p) [a-zA-Z0-9=":; -/]+>/g, /<$1 id="newid" class="newclass">/g);

You can change span|p to span|p|b|img etc to pick up other tags that you would like.

Update:

var str = '<p> <span style="font-family: Arial"><span style="font-size: x-small"><img border="5" hspace="10" alt="" align="left" width="200" height="150" src="/Solutions/image/Lighthouse.jpg" />';
var newvar = str.replace(/<(span|p) [a-zA-Z0-9=":; -/]+>/g, /<$1 id="newid" class="newclass">/g);
alert(newvar);

Upvotes: 0

Related Questions