See the Image Section commented below
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ORDER CONFIRMATION</title>
</head>
<body>
<h3>www.HobbyShop.com</h3>
<h3>Thank You for your purchase, <span th:utext="${purchase.getCustomer().getFirstName()}"></span></h3>
<h3>Order summary</h3>
<div>
<table>
<tr>
<th width="20%">Product Image</th>
<th width="50%">Product Detail</th>
<th width="30%"></th>
</tr>
<tr th:each="orderItem : ${purchase.getOrderItems()}">
<!-- Image section -->
<td>
<p> <span th:utext="${orderItem.imageUrl}"></span> </p>
<img th:src="#{orderItem.imageUrl}" width="150px"/>
</td>
<!-- end of image section -->
<td>
<p> <span th:utext="${ orderItem.name }"></span> </p>
<p>Unit Price: <span th:utext="${ orderItem.unitPrice}"></span> </p>
<p>Quantity: <span th:utext="${ orderItem.quantity}"></span> </p>
</td>
<td>
<p>Subtotal: <span th:utext="${ orderItem.quantity * orderItem.unitPrice }"></span> </p>
</td>
</tr>
</table>
</div>
<h5>Total Quantity: <span th:utext="${purchase.getOrder().getTotalQuantity()}"></span></h5>
<h5>Total Price: <span th:utext="${purchase.getOrder().getTotalPrice()}"></span></h5>
<h3>Order Details</h3>
<h5>Your order will ship to:</h5>
<h5 style="margin: 0" > <span th:utext="${purchase.getCustomer().getFirstName()}"></span> <span th:utext="${purchase.getCustomer().getLastName()}" ></span> </h5>
<h5 style="margin: 0"> <span th:utext="${purchase.getShippingAddress().getStreet()}" ></span> </h5>
<h5 style="margin: 0"> <span th:utext="${purchase.getShippingAddress().getCity()}"></span>, <span th:utext="${purchase.getShippingAddress().getState()}"></span>, <span th:utext="${purchase.getShippingAddress().getZipCode()}" ></span> </h5>
<h5 style="margin: 0"> <span th:utext="${purchase.getShippingAddress().getCountry()}" ></span> </h5>
<h5>Your order Tracking Number: <span th:utext="${purchaseResponse.getOrderTrackingNumber()}"></span> </h5>
</body>
</html>
In <p> <span th:utext="${orderItem.imageUrl}"></span> </p> I can see the image url which is AWS s3 object url where image is stored.
Image URL: https://elasticbeanstalk-us-east-2-157391262832.s3.us-east-2.amazonaws.com/Books/Rafi12534#Gmail.com/ArtOfComputerProgramming.jpg
But In <img th:src="#{orderItem.imageUrl}" width="150px"/> image url is not found.
If i hardcode the image url like this:
<img th:src="#{https://elasticbeanstalk-us-east-2-157391262832.s3.us-east-2.amazonaws.com/Books/Rafi12534#Gmail.com/ArtOfComputerProgramming.jpg}" width="150px"/>
it works.
To me it seems like in img tag we are not getting the img url. but in th:utext image url is shown
The correct syntax for using a ${...} expression inside of a #{...} expression is:
<img th:src="#{${orderItem.imageUrl}}" width="150px" />
(See the standard URL syntax documentation.) In this case, however, there really is no reason to use the standard URL syntax at all. You can simply use the variable directly.
<img th:src="${orderItem.imageUrl}" width="150px" />
The reason #{orderItem.imageUrl} fails is because Thymeleaf is treating orderItem.imageUrl as a string, and not a variable (equivalent to #{'orderItem.imageUrl'} which will resolve to <img src="/context/orderItem.imageUrl" width="150px" /> -- you can see this by simply viewing the source and noticing that your variable wasn't parsed).
Related
Here is the HTML code that I copy and pasted from Anki (Flashcard creation program). The code works fine. (Background: the flashcard is a programming question)
<meta content="width=window-width, initial-scale=1.0" name="viewport">
What does this code do?<div><div background-attachment:="" background-clip:="" background-image:="" background-origin:="" background-position:="" background-repeat:="" background-size:="" class="highlight" initial;="" initial;"=""><pre style="line-height: 25px;"><table class="highlighttable" style="font-family: Arial;"><tbody><tr><td><div 10px"="" class="linenodiv" padding-right:=""><pre style="line-height: 125%">1</pre></div></td><td class="code"><div class="highlight"><pre style="line-height: 125%"><<span style="color: #008000; font-weight: bold">meta</span> <span style="color: #7D9029">http-equiv</span><span style="color: #666666">=</span><span style="color: #BA2121">"X-UA-Compatible"</span> <span style="color: #7D9029">content</span><span style="color: #666666">=</span><span style="color: #BA2121">"IE=edge"</span>></pre></div></td></tr></tbody></table></pre></div><div><center><br></center></div></div>
The code rendered on the browser:
Obviously, this code is not readable in its current format. To fix this, I added the appropriate indentations.
<meta content="width=window-width, initial-scale=1.0" name="viewport">
What does this code do?
<div>
<div background-attachment:="" background-clip:="" background-image:="" background-origin:="" background-position:="" background-repeat:="" background-size:="" class="highlight" initial;="" initial;"="">
<pre style="line-height: 25px;">
<table class="highlighttable" style="font-family: Arial;">
<tbody>
<tr>
<td>
<div 10px"="" class="linenodiv" padding-right:="">
<pre style="line-height: 125%">1</pre>
</div>
</td>
<td class="code">
<div class="highlight">
<pre style="line-height: 125%"><<span style="color: #008000; font-weight: bold">meta</span> <
span style="color: #7D9029">http-equiv</span>
<span style="color: #666666">=</span>
<span style="color: #BA2121">"X-UA-Compatible"</span>
<span style="color: #7D9029">content</span>
<span style="color: #666666">=</span>
<span style="color: #BA2121">"IE=edge"</span>>
</pre>
</div>
</td>
</tr>
</tbody>
</table>
</pre>
</div>
<div>
<center>
<br>
</center>
</div>
</div>
The strange part: the indents above are now appearing in the HTML document.
This shouldn't be happening, correct? I thought newlines in the HTML are not visible to users?
That's because the whitespace is pre (preserved by the browser). This is intended so that you can indent code. Usually, when you want to render code in HTML you take off the indentation:
<td class="code">
<div class="highlight">
<pre style="line-height: 125%"><<span style="color: #008000; font-weight: bold">meta</span>
<span style="color: #7D9029">http-equiv</span>
<span style="color: #666666">=</span>
<span style="color: #BA2121">"X-UA-Compatible"</span>
<span style="color: #7D9029">content</span>
<span style="color: #666666">=</span>
<span style="color: #BA2121">"IE=edge"</span>>
</pre>
</div>
</td>
Notice that you don't need to do it on the <pre> line itself (and that is why the meta part shows with your desired indentation).
If you are going to be using code snippets frequently, a library such as Prismjs will make your life much easier and be worth the overhead (it's a very lightweight library in fact):
<pre><code class="language-html">(... html code ...)</code></pre>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<br/>
<table style="width:100%;">
<tr>
<td style="width:3%;height:60px; background-color:rgb(116,178,48);">
</td>
<td style="width:15%;align:center;font-size:28px;color:rgb(192,0,0);">
<center>Attention!</center>
</td>
<td style="width:82%; background-color:rgb(116,178,48);font-size:18px">
<font color="white"><b><center>Your registration request on the Landowners' Portal has been denied!
</center></b></font>
</td>
</tr>
</table>
<br/>
<table style="width:100%;">
<tr>
<td style="width:5%;">
</td>
<br/>
<td style="width:60%;">
<h4>Hi, </h4>
<p>Your request to register on the Landowners' Portal has been denied.
</p>
<p>Please contact the Land Services Team for any further queries.
</p>
Best Regards, <br/>
Land Services Team<br/>
JKS Resources<br/>
</td>
<td style="width:30%;align:center">
<div style="border: 1px solid #67bd45;">
<h1 style="font-size:17px;color:rgb(0,151,204);text-align:center;">Have any questions?</h1>
<a>
<center> <span class="glyphicon glyphicon-envelope"></span>1- 125-552-1972 </center>
</a>
<br/>
<a href="mailto:Payments#jks.com?" style="color:#337ab7;background:rgba(0, 0, 0, 0.00);font-style:italic" class="navLink">
<center><span class="glyphicon glyphicon-envelope"></span>Land-Lease-Payments#jks.com </center>
</a>
<br/> <br/>
</div>
</td>
<td style="width:5%;">
</td>
</tr>
</table>
</body>
</html>
I have an HTML email template and it is referring the bootstrap to load glyphicon images. The images are showing correctly when html file is opened.
But I am using this email template in ASP.NET Web API to send emails. After receiving the email, not able to see the Glyphicon images?
Please help..Web API - Code
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
This is the what the codes I already have looks like, but I want to set it to an exact width so everything looks neat:
I'm not very good with HTML and was hoping someone could tell me what to put where. Here's the code I have:
<p align="center">
<span style="color:#000080;"><span style="font-size:48px;"><span style="font-family:times new roman,times,serif;">Product Information</span></span>
</span>
</p>
<div>
<h2>
<span style="color:#000080;"><big><u><span style="background-color:#66ccff;">Description </span></u>
</big>
</span>
</h2>
</div>
<ul>
<li>
<span style="font-size:18px;">This is a 2016 Peyton Manning #18 Jersey.</span></li>
<li>
<span style="font-size:18px;">Team: Denver Broncos</span></li>
<li>
<span style="font-size:18px;">Player: Peyton Manning</span></li>
<li>
<span style="font-size:18px;">Color: Orange</span></li>
<li>
<span style="font-size:18px;">Brand: Nike</span></li>
<li>
<span style="font-size:18px;">This is a used item that has <u>NO</u> defects. No rips, tears, or stains.</span></li>
</ul>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Size </span></u>
</big>
</span>
</h2>
</div>
<ul>
<li>
This is a Large/44 Jersey. These are the measurements:</li>
</ul>
</div>
<p align="center">
<img height="230" src="file:///C:/Users/JONATH~1.TOW/AppData/Local/Temp/msohtmlclip1/01/clip_image001.jpg" width="219"><img height="225" src="file:///C:/Users/JONATH~1.TOW/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg" width="225"></p>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:276px;" width="276">
<tbody>
<tr>
<td colspan="4" nowrap="nowrap" style="width:276px;height:20px;">
<p align="center">
Measurement Chart</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>Country</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
Length</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
Width</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
Sleeves</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>U.S.</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>Europe</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
</p>
</td>
</tr>
</tbody>
</table>
<div style="clear:both;">
</div>
<p>
</p>
<p align="center">
<span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:18px;">If you want further details on the sizing, please feel free to message us!</span></span>
</p>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Shipping </span></u>
</big>
</span>
</h2>
</div>
<ul>
</ul>
<p>
<span style="font-size:18px;">This item is shipped using USPS Priority Mail. It is shipped out of St. Paul, MN 55014.</span></p>
</div>
<div>
<br>
<span style="font-size:18px;">We try to ship this package within 24 hour of the time you pay for the item.<br>
We ship Internationally.</span></div>
<p>
<span style="font-size:18px;"><img src="http://thebuttonpost.com/wp-content/uploads/2014/07/priority-mail.png" style="margin-left: 12px; margin-right: 12px; float: right; width: 220px; height: 131px;"></span></p>
<div>
</div>
<p>
<span style="font-size:18px;"><u>The following is included in this shipment:</u></span></p>
<div>
<p>
<span style="font-size:18px;">1. 2-4 Day Shipping in the US</span></p>
<div>
<p>
<span style="font-size:18px;">2. Free Tracking</span></p>
<p>
<span style="font-size:18px;">3. Insurance for your package up to $50.00</span></p>
<div>
</div>
<p>
<span style="font-size:18px;">Please insure that your address is correct. If you are worried your package could be stolen please contact your Post Office with the tracking number and have them hold it there for you. Unfortunately once the tracking shows the package has been delivered to the address it is your responsibility and refunds cannot be accepted.</span></p>
<p>
<span style="font-size:18px;">If your package was damaged by USPS, please contact us ASAP with photos showing the extent of the damage. You will be refunded and we will take care of making an insurance claim with USPS since packaging was our responsibility.</span></p>
<p>
</p>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Return Policy </span></u>
</big>
</span>
</h2>
</div>
<p>
<span style="font-size:18px;">We try to make the description of the item you’re buying as detailed as possible to avoid the need for returns. If your item contains a defect that was not listed in the description we will accept a return with photos of the defect. If the item’s defect is clearly not in the photos we posted, or seem to be manufactured, your return will not be accepted.</span></p>
</div>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Payment </span></u>
</big>
</span>
</h2>
</div>
<p>
<span style="font-size:18px;">We accept PayPal and Credit/Debit cards. After you click “Purchase Item” you are not done checking out! Click on <u>PAY NOW</u>. Your package will not be shipped until you pay for your item, and it will be cancelled if you do not pay within 2 Business Days.</span></p>
</div>
<p align="center">
</p>
<p align="center">
</p>
<p style="text-align: center;">
<img alt="" src="http://www.bceldercare.ca/images/paypal-verified.png" style="width: 500px; height: 146px;"></p>
<p align="center">
</p>
</div>
</div>
<p>
</p>
I wouldn't recommend a fixed width. On mobile devices your template wont show very well. I would recommend you look a simple responsive grid css layout like skeleton - it will resize it all to the width of the browser, works fine in eBay!
How about putting your entire page in a container, giving that container a width of how big you want it to be and centering it. In my snippet, I gave the container a width of 50vw (Which equals to 50% of the current viewport width)
#container{
width:50vw;
display:block;
margin:0 auto;
}
<div id="container">
<p align="center">
<span style="color:#000080;"><span style="font-size:48px;"><span style="font-family:times new roman,times,serif;">Product Information</span></span></span></p>
<div>
<h2>
<span style="color:#000080;"><big><u><span style="background-color:#66ccff;">Description </span></u></big></span></h2>
</div>
<ul>
<li>
<span style="font-size:18px;">This is a 2016 Peyton Manning #18 Jersey.</span></li>
<li>
<span style="font-size:18px;">Team: Denver Broncos</span></li>
<li>
<span style="font-size:18px;">Player: Peyton Manning</span></li>
<li>
<span style="font-size:18px;">Color: Orange</span></li>
<li>
<span style="font-size:18px;">Brand: Nike</span></li>
<li>
<span style="font-size:18px;">This is a used item that has <u>NO</u> defects. No rips, tears, or stains.</span></li>
</ul>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Size </span></u></big></span></h2>
</div>
<ul>
<li>
This is a Large/44 Jersey. These are the measurements:</li>
</ul>
</div>
<p align="center">
<img height="230" src="file:///C:/Users/JONATH~1.TOW/AppData/Local/Temp/msohtmlclip1/01/clip_image001.jpg" width="219"><img height="225" src="file:///C:/Users/JONATH~1.TOW/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg" width="225"></p>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:276px;" width="276">
<tbody>
<tr>
<td colspan="4" nowrap="nowrap" style="width:276px;height:20px;">
<p align="center">
Measurement Chart</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>Country</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
Length</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
Width</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
Sleeves</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>U.S.</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>Europe</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
</p>
</td>
</tr>
</tbody>
</table>
<div style="clear:both;">
</div>
<p>
</p>
<p align="center">
<span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:18px;">If you want further details on the sizing, please feel free to message us!</span></span></p>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Shipping </span></u></big></span></h2>
</div>
<ul>
</ul>
<p>
<span style="font-size:18px;">This item is shipped using USPS Priority Mail. It is shipped out of St. Paul, MN 55014.</span></p>
</div>
<div>
<br>
<span style="font-size:18px;">We try to ship this package within 24 hour of the time you pay for the item.<br>
We ship Internationally.</span></div>
<p>
<span style="font-size:18px;"><img src="http://thebuttonpost.com/wp-content/uploads/2014/07/priority-mail.png" style="margin-left: 12px; margin-right: 12px; float: right; width: 220px; height: 131px;"></span></p>
<div>
</div>
<p>
<span style="font-size:18px;"><u>The following is included in this shipment:</u></span></p>
<div>
<p>
<span style="font-size:18px;">1. 2-4 Day Shipping in the US</span></p>
<div>
<p>
<span style="font-size:18px;">2. Free Tracking</span></p>
<p>
<span style="font-size:18px;">3. Insurance for your package up to $50.00</span></p>
<div>
</div>
<p>
<span style="font-size:18px;">Please insure that your address is correct. If you are worried your package could be stolen please contact your Post Office with the tracking number and have them hold it there for you. Unfortunately once the tracking shows the package has been delivered to the address it is your responsibility and refunds cannot be accepted.</span></p>
<p>
<span style="font-size:18px;">If your package was damaged by USPS, please contact us ASAP with photos showing the extent of the damage. You will be refunded and we will take care of making an insurance claim with USPS since packaging was our responsibility.</span></p>
<p>
</p>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Return Policy </span></u></big></span></h2>
</div>
<p>
<span style="font-size:18px;">We try to make the description of the item you’re buying as detailed as possible to avoid the need for returns. If your item contains a defect that was not listed in the description we will accept a return with photos of the defect. If the item’s defect is clearly not in the photos we posted, or seem to be manufactured, your return will not be accepted.</span></p>
</div>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Payment </span></u></big></span></h2>
</div>
<p>
<span style="font-size:18px;">We accept PayPal and Credit/Debit cards. After you click “Purchase Item” you are not done checking out! Click on <u>PAY NOW</u>. Your package will not be shipped until you pay for your item, and it will be cancelled if you do not pay within 2 Business Days.</span></p>
</div>
<p align="center">
</p>
<p align="center">
</p>
<p style="text-align: center;">
<img alt="" src="http://www.bceldercare.ca/images/paypal-verified.png" style="width: 500px; height: 146px;"></p>
<p align="center">
</p>
</div>
</div>
<p>
</p>
</div>
i have email template and this was configured in firebug Linux its working fine over there , but when that same template configure in mobile phone its not working messing logo and css .
code is like below.
<style>span,p,a{font-size:11px;text-transform:uppercase;color:#7f7f7f;font-family:Calibri,Arial,sans-serif;margin:0;padding:0;line-height:11px}</style>
<body>
<div style="width:415px;height:293px">
<div style="width:5px;float:left">
<div style="height:100%;width:100%">
<img style="height:290px" src="http://example.com/line.png" />
</div>
</div>
<div style="width:88%;float:left;padding:5px 0 0 10px">
<p style="clear:both;line-height:12px">
<span style="text-transform:uppercase;font-weight:bold">Example Name</span>
<span style="font-size:10px;vertical-align:top"> |</span>
<span style=""> example name </span>
</p>
<p style="margin:5px 0 3px;padding:0;clear:both;line-height:10px"></p>
<p style="margin:10px 0;padding:0;clear:both;line-height:12px">
<img src="http:www.demo.com/signature_logo/logo.png" alt="Logo" style="width:150px"/>
</p>
</div>
</div>
</body>
The code?
Probably you add the CSS code inner <head></head>
Most email clients remove all above the <body> tag
EDIT
Now I see your error. in your logo image put correct protocol:
http:www.demo.com/signature_logo/logo.png INCORRECT
http://www.demo.com/signature_logo/logo.png CORRECT
And put <style> tag down the <body> tag to maximize compatibility.
I have an HTML file. Here is a sample
<div class="criteria" style="padding-left:0;font-style:italic"> You searched for:
<span title="A*" >Individual: <span><b>A*</b></span></span>
</div>
</td>
</tr>
</table>
<table cellpadding="5" cellspacing="0" border="0" style="border-collapse: collapse; width: 100%">
<tr class="ListItemColorNew">
<td style="width:50%">
<div class="gvListItemStyle">
<span class="LargeText15">JAMES BOND A'MONEYPENNY </span> (LIC# 1111111)
<div class="GrayTextShade"><i>Alternate Names: BOND JAMES</i></div>
<div class="GrayTextShade">
GREY TIDE LLC (LIC# 2222)
</div>
</div>
</td>
<td style="width:50%">
<div class="gvListItemStyle">
<span class="LargeText15">FRANK WHITE A'SMALLS </span> (LIC# 1111111)
<div class="GrayTextShade"><i>Alternate Names: JAMES SMALLS</i></div>
<div class="GrayTextShade">
WEST RIVER CORP LLC (LIC# 3333)
</div>
</div>
</td>
<td style="width: 25%; vertical-align: top">
<div class="gvListItemStyle">
<div><img alt="help" src=\'/Content/images/BrokerCheck/icon-blueCheck.png\' style=\'vertical-align:top;padding-right:5px\' />Broker</div>
</div>
</td>
<td style="width:25%;text-align:right;vertical-align:top">
<div class="gvListItemStyle">
<a class="btn btn-primary" href="/Individual/Summary/5820616">Details »</a> </div>
</td>
</tr>
I'm trying to extract everything between <td style="width:50%"> and </td>. The data is stored in a file testFile.txt.
This is the Perl code I used
system("perl -pi.bak -e '/^<td style=\"width:50%\">.+<\\/td>/mg' testFile.txt";
Your below code isn't actually doing anything:
system("perl -pi.bak -e '/^<td style=\"width:50%\">.+<\\/td>/mg' testFile.txt");
You're matching m// in a void context with no captures, so the executed statement is meaningless.
Your pattern will never match your content because:
a. You're using the any character ., but it won't match newlines unless you use the /s Modifier.
b. You're using -p for line by line processing of the file, but your pattern would need to span lines in order to match.
The following demonstrates both a regex solution (not recommended) and using an actual HTML Parser, in this case Mojo::DOM. For a helpful 8 minute introductory video, check out Mojocast Episode 5
use strict;
use warnings;
use Mojo::DOM;
my $data = do { local $/; <DATA> };
# Regex Solution:
if ( $data =~ m{<td style="width:50%">(.*?)</td>}s ) {
print "Regex Solution:\n$1";
} else {
warn "No pattern match found";
}
# Parser Solution:
my $dom = Mojo::DOM->new($data);
my $yourtd = $dom->at(q{td[style="width:50%"]})->content;
print "\nMojo::DOM:\n", $yourtd;
__DATA__
<html>
<head>
<title>Hello World</title>
</head>
<body>
<table>
<tr>
</td>
<div class="criteria" style="padding-left:0;font-style:italic"> You searched for:
<span title="A*" >Individual: <span><b>A*</b></span></span>
</div>
</td>
</tr>
</table>
<table cellpadding="5" cellspacing="0" border="0" style="border-collapse: collapse; width: 100%">
<tr class="ListItemColorNew">
<td style="width:50%">
<div class="gvListItemStyle">
<span class="LargeText15">JAMES BOND A'MONEYPENNY </span> (LIC# 1111111)
<div class="GrayTextShade"><i>Alternate Names: BOND JAMES</i></div>
<div class="GrayTextShade">
GREY TIDE LLC (LIC# 2222)
</div>
</div>
</td>
<td style="width: 25%; vertical-align: top">
<div class="gvListItemStyle">
<div><img alt="help" src=\'/Content/images/BrokerCheck/icon-blueCheck.png\' style=\'vertical-align:top;padding-right:5px\' />Broker</div>
</div>
</td>
<td style="width:25%;text-align:right;vertical-align:top">
<div class="gvListItemStyle">
<a class="btn btn-primary" href="/Individual/Summary/5820616">Details »</a> </div>
</td>
</tr>
<table>
</body>
</html>
Outputs:
Regex Solution:
<div class="gvListItemStyle">
<span class="LargeText15">JAMES BOND A'MONEYPENNY </span> (LIC# 1111111)
<div class="GrayTextShade"><i>Alternate Names: BOND JAMES</i></div>
<div class="GrayTextShade">
GREY TIDE LLC (LIC# 2222)
</div>
</div>
Mojo::DOM:
<div class="gvListItemStyle">
<span class="LargeText15">JAMES BOND A'MONEYPENNY </span> (LIC# 1111111)
<div class="GrayTextShade"><i>Alternate Names: BOND JAMES</i></div>
<div class="GrayTextShade">
GREY TIDE LLC (LIC# 2222)
</div>
</div>
.*?(<td style="width:50%">((?!<\/td>).)*?<\/td>)
See demo.Use gs flags.
See demo.
http://regex101.com/r/oC3nN4/15
As said in the comments, remove the ^ in your regexp.
Also, use /s instead of /mg if you want to treat the file content as a single line string which allows '.' pattern to allow match new line characters '\n'.
/<td style=\"width:50%\">.+?<\\/td>/s
.+? while stop the matching at the first occurrence of </td>, not the last
I hope you've seen previous advice to avoid regexes to process HTML? It's really true! The only excuse I can think of for avoiding one of the several excellent HTML modules is that your data is so malformed that nothing else will process it.
Your "sample" of your HTML file is particularly unhelpful. Before I fixed the indentation the lines were scattered all over the place. After I looked at it I saw that it was the end of one table element followed by the start of another, so it left several elements unbalanced and either closed but not opened or vice-versa. Please don't do that to us.
I built a well-formed HTML file that contains your extract, and this is a program that will process it that uses HTML::TreeBuilder
use strict;
use warnings;
use HTML::TreeBuilder;
my $tree = HTML::TreeBuilder->new_from_file('html.html');
my #td50 = $tree->look_down(_tag => 'td', style => 'width:50%');
print $_->as_HTML('<>&', ' '), "\n\n" for #td50;
output
<td style="width:50%">
<div class="gvListItemStyle"><span class="LargeText15">JAMES BOND A'MONEYPENNY </span> (LIC# 1111111) <div class="GrayTextShade"><i>Alternate Names: BOND JAMES</i></div>
<div class="GrayTextShade"> GREY TIDE LLC (LIC# 2222) </div>
</div>
</td>
In case you or others need it, here's the HTML input document that I used
<html>
<body>
<table>
<tr>
<td>
<div class="criteria" style="padding-left:0;font-style:italic"> You searched for:
<span title="A*" >Individual: <span><b>A*</b></span></span>
</div>
</td>
</tr>
</table>
<table cellpadding="5" cellspacing="0" border="0" style="border-collapse: collapse; width: 100%">
<tr class="ListItemColorNew">
<td style="width:50%">
<div class="gvListItemStyle">
<span class="LargeText15">JAMES BOND A'MONEYPENNY </span> (LIC# 1111111)
<div class="GrayTextShade"><i>Alternate Names: BOND JAMES</i></div>
<div class="GrayTextShade">
GREY TIDE LLC (LIC# 2222)
</div>
</div>
</td>
<td style="width: 25%; vertical-align: top">
<div class="gvListItemStyle">
<div><img alt="help" src=\'/Content/images/BrokerCheck/icon-blueCheck.png\' style=\'vertical-align:top;padding-right:5px\' />Broker</div>
</div>
</td>
<td style="width:25%;text-align:right;vertical-align:top">
<div class="gvListItemStyle">
<a class="btn btn-primary" href="/Individual/Summary/5820616">Details »</a> </div>
</td>
</tr>
</table>
</body>
</html>