RegEx Find/Replace in Dreamweaver - Paste HTML as variable? - html

I have to convert spreadsheet data (name, image name, & bio) to HTML, so I use a RegEx find/replace with variables in DW which is easy enough. The issue is that one column contains a bio that is HTML (paragraphs and italics mainly) and RegEx ignores that "row" for reasons beyond my researching capabilities.
I don't want to strip then manually add the HTML again, so show me the way!
TL;DR: Is there a way to paste HTML as a RegEx variable?
Here's some example table data I quickly paste/format from Excel to DW:
<tr>
<td>James Brian Hellwig</td>
<td>James_Brian_Hellwig</td>
<td><p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing</em> elit. Sunt, ut iste tempore laborum aperiam nostrum obcaecati neque natus adipisci fugit. </p>
<p>Dolores, eligendi animi ea totam nobis cumque ullam eveniet accusamus!</p></td>
</tr>
<tr>
<td>Jiminy Cricket</td>
<td>Jiminy_Cricket</td>
<td><p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing</em> elit. Sunt, ut iste tempore laborum aperiam nostrum obcaecati neque natus adipisci fugit. </p>
<p>Dolores, eligendi animi ea totam nobis cumque ullam eveniet accusamus!</p></td>
</tr>
Here's the "Find" RegEx:
<tr>
<td>([^<]*)</td>
<td>([^<]*)</td>
<td>([^<]*)</td>
</tr>
Here's the "Replace" RegEx:
<div>
<img class="floatleft" src="$2.jpg" alt="$1" />
<h2 class="name">$1</h2>
$3
</div>
I will either mouth-kiss or buy a beer for the first person to answer this. Your choice.

Your problem is that [^<]* matches anything except an opening angle bracket. That's good idea in general, so you don't accidentally match across tag boundaries, but in this case it's unfortunate because there's a <p> tag right after the <td>.
Therefore, I propose a different solution. Allow other tags, just not <td> tags within a <td> tag:
<tr>
<td>((?:(?!</?td)[\s\S])*)</td>
<td>((?:(?!</?td)[\s\S])*)</td>
<td>((?:(?!</?td)[\s\S])*)</td>
</tr>
Explanation:
(?: # Start non-capturing group that matches...
(?!</?td) # (unless we're at the start of a <td> or </td> tag)
[\s\S] # ... any character (whitespace or non-whitespace).
)* # Repeat as needed

You can use
<tr>
<td>.*?</td>
<td>.*?</td>
<td>.*?</td>
</tr>
Explanation: .(dot) matches any character except a newline. If you need to go across multiple lines, you can use [\s\S] like Tim suggested.
* makes it look for 0 or more of the .(dot). ? makes that reluctant, meaning we grab as FEW characters as we possibly can while still matching the END TD TAG.
Since there is whitespace between your TR and TD tags, we must include that in our regex. Sorry, but I should have caught this sooner! Also, we can't put spaces in our regex unless we are searching for a space, which is why regex's look like a long chain of complicated characters. Here is what it should look like:
<tr>\s*<td>.*?</td>\s*<td>.*?</td>\s*<td>.*?</td>\s*</tr>
As you can see, I used \s which means a whitespace character, followed by a * which means 0 or more times.
Since you have the same pattern repeating 3 times, you can actually use the following notation for repetition:
<tr>\s*(<td>.*?</td>\s*){3}</tr>
Repetition notation is great. Let's say, for example, that you not only want to match tables with exactly 3 TD's, but you want to match table's that have anywhere from 1 to 4 TD's. You would use:
<tr>\s*(<td>.*?</td>\s*){1,4}</tr>

FYI, A co-worker just found a great alternative to using RegEx in the example above by using Dreamweaver XSLT files to dynamically add XML data to the HTML. We simply use an XML-mapped spreadsheet to export the XML and voilà...content updated.
Once the spreadsheet's schema is set and the XSL file is formatted with the appropriate HTML "repeating regions", it's smooth sailing.
Resources:
How To Export an Excel 2010 Worksheet to XML
Using XML and XSL with web pages (adobe.com)

Related

How to keep the </a> closing tag on same line and all the others in new line in a Vue.js project?

vue/html-closing-bracket-newline adds an unexpected space after the link text. removing the space creates a conflict and error in prettier and eslint. looking for a solution to over come this with a simple config change instead of a line by line ignore comment.
vue/html-closing-bracket-newline moves all the closing tags to new line, which adds an unexpected space after the link text
<a
href="#"
place="linkText"
target="_blank">
lorum ipsum
</a>
link space
expected code syntax format is
<a
href="#"
place="linkText"
target="_blank">lorum ipsum</a>
But it creates a conflict between prettier / eslint / vue.
prettier / eslint error
An easy solution would be adding <!-- eslint-disable-line --> in each anchor tag. But we are looking for a simple solution to cover all anchor tags in the project.
The issue is with the whitespace-sensitive formatting.
This attribute htmlWhitespaceSensitivity accept the following options:
"css" - Respect the default value of CSS display property. For Handlebars treated same as strict. "Default"
"strict" - Whitespace (or the lack of it) around all tags is considered significant.
"ignore" - Whitespace (or the lack of it) around all tags is considered insignificant.
You can fix it by adding the following rule to your .eslintrc.js file (rules section):
"prettier/prettier": [
"warn",
{
htmlWhitespaceSensitivity: "strict"
}
]
It would consider the whitespace "significant" for all cases. That means:
<!-- input -->
<span class="dolorum atque aspernatur">Est molestiae sunt facilis qui rem.</span>
<div class="voluptatem architecto at">Architecto rerum architecto incidunt sint.</div>
<div class="voluptatem architecto at">
Architecto rerum architecto incidunt sint.</div>
<div class="voluptatem architecto at">
Architecto rerum architecto incidunt sint.
</div>
<!-- output -->
<span class="dolorum atque aspernatur"
>Est molestiae sunt facilis qui rem.</span
>
<div class="voluptatem architecto at"
>Architecto rerum architecto incidunt sint.</div
>
<div class="voluptatem architecto at">
Architecto rerum architecto incidunt sint.</div
>
<div class="voluptatem architecto at">
Architecto rerum architecto incidunt sint.
</div> <!-- in this case you would have the whitespace -->
It looks ugly as it puts the </div at the end of the string and > the next line. But it solves the problem.
You can read more about it here:
https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting
And here is an old Github issue on prettier stating the same as you mentioned here:
https://github.com/prettier/prettier/issues/6290
Just do this:
<a href="#"
place="linkText"
target="_blank">
lorum ipsum</a>
Use Ctrl + , on Windows (or CMD + , on Mac) to open your editors settings.
Search for HTML closing bracket, and you will be presented with a screen that looks like the image attached.
If it is unchecked, you can go ahead and check it.
What this setting does is add the closing bracket on the same line as the last letter as opposed to dropping it to the next line where it sits alone, as you are currently experiencing.
You can also edit it in your settings.json file like the below:
"prettier.bracketSameLine": true
If you want to have access to even more brackets setting options. You can search for bracket in your VS code user setting and play around with the options.

How can I indent paragraphs, but exclude certain lines for formatting?

so I have been wracking my brain and trying different options to get this to work, but I can't seem to get anything to do what I want.
I am trying to indent the first line of paragraphs on a web page using
p {
text-indent: 3em;
}
However, I am also displaying information in a formatted manner, and the font needs to be displayed:
Description: Pargraph 1.
Paragraph 2...so on.
Label 2: ...
I would like to not indent the paragraphs that start with the bold-faced labels; because it throws formatting and alignment off and just generally does not look that good.
Is there anyway to stylize the P tag but exclude any tags that are also tagged with B or strong so that only paragraphs that do not start with a bold-faced character/word get indented?
I attempted to use
p:not(b)
and
p:not(strong)
but they didn't seem to work, I'm assuming because b and strong are not div ids/classes and won't work?
EDIT: To clarify, this is for a page on a Tumblr blog. The way Tumblr handles its customization; the blog itself has its own CSS Style sheet/html that can be edited. Then, additional pages can be added that can either be made entirely from scratch (losing some functionality because they no longer tie to the css of the main blog) or using a 'standard' layout that pulls and connects it to the css sheet of the main blog.
On the main blog, you can edit the displaced text in boxes and such with the classes as suggested:
p class=class name {
css
}
But in a standard layout page, the text editor is an extremely simplistic HTML editor; so you cannot specify a specific class for individual paragraphs and all text gets entered as:
<p> <strong> Description: </strong> Paragraph 1 </p> <br/>
<p> Paragraph 2 </p>
And it uses strong instead of b for bold; and em for italics.
Check the below snippet as an illustration of my comment above.
If your b or em are inside the p, then we may need different method. Please share your code for further discussion.
.bold {
font-weight: bold;
}
p:not(.bold) {
text-indent: 3em;
}
<p class="bold">
Paragraph
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo sapiente et expedita dicta vero natus nobis laudantium a voluptatum alias qui blanditiis perferendis, neque, nisi vel quibusdam doloribus id veniam.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo sapiente et expedita dicta vero natus nobis laudantium a voluptatum alias qui blanditiis perferendis, neque, nisi vel quibusdam doloribus id veniam.
</p>

Do class attributes in HTML need to have matching CSS styles?

I am including a class name in some of the HTML tags, but not necessarily going to use them later, if I am not using them in my CSS file, VS Code will show me this warning:
CSS class selector 'nav-links' not found
(assuming I gave the class name as nav-links)
for example, if I write the below code:
<div class='hero-introduction'>
<h2>
Elena Joy <br />
Photographer
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque molestiae dolores cum debitis
corporis. At enim aut atque maiores omnis.
</p>
<a href='.gallery'>Gallery</a>
</div>
then I am getting this warning:
CSS class selector 'hero-introduction' not found
if I add this class to my CSS file then there is no error to be seen. Is it necessary to add all the class names initialized in my HTML file in the style.css file?
I am using the "HTML CSS Support" extension in Visual Studio Code.
No, it is not necessary to define all the class names used in the HTML in your CSS file. Classes that you specify in HTML but that are not defined/referenced in a CSS file make no difference in the visual output of your page. The warning is designed to show you that the class is not defined in any CSS file and as such might be confusing to other developers reading your code as the class serves no purpose.
Downgrade your extension named "HTML CSS Support" to below version 1.5.0 (since they have added css validations in new update).
I also have been seeing "CSS class selector '__' not found" messages in the Problems tab in my VS Code Terminal. I disabled the HTML CSS Support extension, and now I am no longer seeing those warnings in my terminal. :)

How to make multiple line breaks in markdown to create white space, without typing multiple <br /> instances [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
Introductory HTML student, I'm trying to learn how to make multiple line breaks without having to type multiple <br /> when using a WYSIWYG editor.
The solutions I've read so far suggest adding two spaces to the end of a line prior to moving to to the next line and this will create a space between paragraphs.
However when I attempt to add two spaces at the beginning of an empty line and press enter to move to the next, my output preview does not show that I'm creating additional blank lines.
The goal is to be able to add up to 4 blank lines between some paragraphs in the output content to help meet a formatting goal. My current best working solution is to type 4 <br /> in a row like this:
<!-- content here then four spaces to create white space before next content -->
<br />
<br />
<br />
<br />
<!-- next content -->
Is there another solution when writing in markdown to get a similar result?
The goal is to be able to easily create multiple (at least 4) line breaks when desired between paragraphs. Easily here means without having to type out <br /> or <br> every time I want to do this.
Any help is appreciated, and -if applicable-:
deeper understandings of how this process works,
recommendations on your fav literature, blogs, or documentation regarding this topic, and
any advice & anecdotes from a more experienced viewpoint about how you think about this kind of issue now, as opposed to how I am thinking about it in a more novice state.
depending on the WYSIWYG editor if you can access the CSS you could play with:
br { display:block; margin-top:10px; line-height:22px; }
increase the 10px and the 22px line-height to your convenience...
other than that I don't know... don't really see the downside of
(yes they can be on the same line)
it's just copy&paste after all?
Since you can change HTML code in this WYSIWYG editor (you did not specified which one it is), then you can also use style="" (CSS). Just make margin on paragraphs. You can use pixels (px) value, but if you wanna have value based on current font size then "em" will be better solution.
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat corporis aliquid adipisci alias vel. Odit consectetur saepe velit vel distinctio enim ipsam aperiam eaque, reiciendis itaque officiis ad fuga dolorem!</p>
<p style="margin-top: 3em">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat corporis aliquid adipisci alias vel. Odit consectetur saepe velit vel distinctio enim ipsam aperiam eaque, reiciendis itaque officiis ad fuga dolorem!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat corporis aliquid adipisci alias vel. Odit consectetur saepe velit vel distinctio enim ipsam aperiam eaque, reiciendis itaque officiis ad fuga dolorem!</p>

Hiding headings in the document outline for accessibility reasons

I have a question about ensuring good document structure when the visual design doesn't call for explicit headings.
Take the following example HTML for a homepage.
<header>
<h1>Our Brand</h1>
<p>Tagline</p>
</header>
<section class="company">
<h2>Our Company</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus error hic, aliquid assumenda sed optio, praesentium repellendus numquam laudantium esse molestias minima cum mollitia fugiat? Eum impedit deserunt aliquid ratione.</p>
</section>
<section class="values">
<h2>Our Values</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Officia reiciendis illum temporibus. Praesentium repellat, iste officiis?</li>
<li>Quos facere enim officiis, recusandae inventore veritatis id.</li>
<li>Iste deleniti doloremque dignissimos, voluptate obcaecati velit optio.</li>
<li>Ut non enim, dolore saepe minus soluta illum?</li>
<li>Enim iure odit soluta laboriosam quis cupiditate eveniet.</li>
</ul>
</section>
<section class="team">
<h2>Our Team</h2>
<h3>Marketing</h3>
<ul>
<li>Lorem ipsum.</li>
<li>Voluptates, cupiditate.</li>
<li>Quia, ad?</li>
<li>Facere, blanditiis!</li>
</ul>
<h3>Social</h3>
<ul>
<li>Lorem ipsum.</li>
<li>Voluptates, cupiditate.</li>
<li>Quia, ad?</li>
<li>Facere, blanditiis!</li>
</ul>
<h3>PR</h3>
<ul>
<li>Lorem ipsum.</li>
<li>Voluptates, cupiditate.</li>
<li>Quia, ad?</li>
<li>Facere, blanditiis!</li>
</ul>
</section>
In this markup, there is a clear heading structure (i.e. h1 > h2 > h3).
But let's say it's been agreed that the 'Our Team' <h2> heading doesn't need to be shown as it is implied by the visual design. However, it is important for good document structure (for accessibility reasons).
Do we...
Show the 'Our Team' <h2> heading for screen readers and search engines using a '.visuallyhidden' class? (i.e. one which hides content off-screen)
Change all the <h3>s in the 'team' section to be <h2>s? This doesn't feel right from a contents perspective, as they feel like they should be contained under their own heading.
Skip the 'Our Team' <h2> heading and go straight to <h3>. Skipping heading levels doesn't seem right either.
Sidenote,
I've noticed that gov.uk (often hailed as a good accessibility site) do this. They are hiding a <h1> for their 'All Categories' heading. Also, they are hiding a <h2> in the footer for 'Support Links'
https://www.gov.uk/browse/benefits
Hiding the headings seems sensible but i've seen a lot of people posting about how Google will treat this as a black-hat SEO tactic.
I assume it would take a lot more than a couple of hidden headings to trigger any penalisation from Google, but maybe doing it on <h1>s would be a problem.
Any thoughts on this issue would be appreciated!
I would not worry about SEO penalties here. Years of addressing what you are trying to address suggest the effect is either none or negligible.
In your example, the <h2> has no content, it leads directly to the <h3>. In that scenario I always like to add some content so it isn't a hard visual / audio jump. As it is, if I navigate by heading in my screen reader, then I get no content under that <h2>, so it might already feel a bit odd.
Anyway, if you think you truly do not need the "Teams" text (visually or otherwise), then you could just remove it altogether and elevate the others to <h2>.
So from your three options:
Show the 'Our Team' <h2> heading for screen readers and search engines using a .visuallyhidden class? (i.e. one which hides content off-screen)
Meh. In my opinion, either there is content there to support it or there isn't. In your example, there is no content to support it. If you do decide to visually hide the text, don't do it off-screen as that can jack with RTL translations, look at a clipped text instead (there are many examples, that just happens to have a recent bit of tweaking).
Change all the <h3>s in the 'team' section to be <h2>s? This doesn't feel right from a contents perspective, as they feel like they should be contained under their own heading.
Do this one. I tend to agree in principle that Teams warrants its own heading. But to do that you need content under the Teams <h2>, in my opinion. If no content will go there and you remove the Teams <h2>, then this is your next best option.
Skip the 'Our Team' <h2> heading and go straight to <h3>. Skipping heading levels doesn't seem right either.
Nope. That is a WCAG failure for most auditors (I will fail it).
As far as the outline is concerned,
the heading <h2>Our Team</h2> does two useful things in your context:
it makes clear what "Marketing", "Social", and "PR" refer to (otherwise it would not be clear that these sections contain lists of team members)
it groups the three sections under one outline entry (otherwise they would be on the same level like "Our Values" etc., which wouldn’t make sense)
Visually hiding the heading fulfills both jobs. I would do this, but only if it’s really not possible to show the heading (which is typically always preferable), of course.
An alternative that fulfills the second job (grouping the entries), but not the first one (giving a useful label), is to use section elements explicitly (which is, by the way, recommended to do anyway):
<section class="team">
<h2>Our Team</h2>
<section>
<h3>Marketing</h3>
</section>
<section>
<h3>Social</h3>
</section>
<section>
<h3>PR</h3>
</section>
</section>
Now you could omit the h2 without changing the outline (except for the label, of course), so the three sections are still grouped, conveying that they belong together.
(Of course this only works for user agents that implement the outline algorithm.)