We Keep Coding

How to find a unique string within html and wrap it with a tag, but exclude links and urls

I'm looking for a way to look for a specific string within a page in the visible text and then wrap that string in <em> tags. I have tried used HTML Agility Pack and had some success with a Regex.Replace but if the string is included within a url it also gets replaced which I do not want, if it's within an image name, it gets replaced and this obviously breaks the link or image url.
An example attempt:
var markup = Encoding.UTF8.GetString(buffer);
var replaced = Regex.Replace(markup, "product-xs", " <em>product</em>-xs", RegexOptions.IgnoreCase);
var output = Encoding.UTF8.GetBytes(replaced);
_stream.Write(output, 0, output.Length);
This does not work as it would replace a <a href="product/product-xs"> with <a href="product/<em>product</em>-xs"> - which I don't want.
The string is coming from a text string value within a CMS so the user can't wrap the words there and ideally, I want to catch all instances of the word that are already published.
Ideally I would want to exclude <title> tags, <img> tags and <a> tags, everything else should get the wrapped tag.
Before I used the HTML Agility Pack, a fellow front end dev tried it with JavaScript but that had an unexpected impact on dropdown menus.
If you need any more info, just ask.

You can use HTML Agility Pack to select only the text nodes (i.e. the text that exists between any two tags) with a bit of XPath and modify them like this.
Looking only in body will exclude <title>, <meta> etc. The not excludes script tags, you can exclude others in the same way (or check the parent node in the loop).
foreach (HtmlNode node in htmlDoc.DocumentNode.SelectNodes("//body//*[not(self::script)]/text()"))
{
var newNode = htmlDoc.CreateTextNode(node.InnerText.Replace("product-xs", "<em>product</em>-xs"));
node.ParentNode.ReplaceChild(newNode, node);
}
I've used a simple replace, regex will work fine too, prob best to check the performance of each approach and choose which works best for your use case.

Regex - how to replace css when not inside of html

Alright, so I've been looking around for quite a while trying to figure out how to get this to work out. So what I'm trying to do is replace anything in strings that looks like this:
foo: bar;
But only if its not inside something like this:
<div style='foo: bar; ofoo: obar'>
So the basic idea is that I want to replace css when its not inside html style attributes. I understand that you can use a for loop and check it but I would like to do this with just the regex replace.
I'm using JavaScript Regex heres what my code attempt currently looks like:
\b(.*?):(|\s)(.*?);
https://regex101.com/r/LWohvu/1
Notes:
I understand that you could use a ^ to check if it starts with it but that only works for the first line.
If I didn't cover any needed any information please feel free to comment!

According to your description, you want to replace all style in your html page except those are inside of a html tag. I've updated your regex and this worked according to your need. Please check this.
Regex:
^(?!(\=|\<))(.*?):(.*?);
Regex in JavaScript:
/^(?!(\=|\<))(.*?):(.*?);/gm
All style start with style= if this exists inside of a html tag. So, I've tried to avoid those using ^(?!(\=|\<)). This represent not start with = and <. Avoid = for style and < for html tag.
Please check this in Updated Regex.

How can I set a link for each word in a sentence?

The best way to explain my question is using the example:
https://www.priberam.pt/DLPO/casa
As you hover each word within the main content, it refers to a link for the meaning of the "hovered" word. Is it possible to configure each word to turn into a link, and refer all links to its "meaning"?
I believe that a function that turns all words into links to its "pages" would be ok.
This is what we've been trying:
var link = /wordToReplace/gi;
var urlLink = 'https://www.priberam.pt/DLPO/wordToBeReplaced';
var newLink = urlLink.replace(wordToBeReplaced, 'wordToReplace');
Thanks!

You would need to write a function that upon hover of each element with a particular class would then see the html content inside the tag and then search for the definition attaching an additional class that would display a info-layer with the content your JS would inject (the meaning of the word).
I would start writing with some pseudo-code in order to determine all the steps that your JS script would need to do to achieve this.
I would then design the HTML so that each word has a span tag with the same class as what the JS will be looking for in order to trigger this function. You can write a separate JS function to split a paragraph into an array and then append the span tag on each array value before placing the array content back into the page.
Once you have your HTML, I would write your hover function following your pseudo-code you wrote before.
Finally I would style the code that JS is injecting into the DOM with CSS to finish.
If you are fairly good with jQuery, you can have this done in a few hours, but personally I would just use vanilla JavaScript since this seems like a learning experience for you but it would take longer.

Something similar to the example below?
var textToConvert = 'Words to be converted to links';
var lookupUrl = 'http://www.merriam-webster.com/dictionary/';
var convertedText = textToConvert.replace(
/(\w+)/g,
'$1'
);
document.getElementById('output').innerHTML = convertedText;
console.log(convertedText);
<p id="output"></p>

Use jquery to only insert a start tag or end tag

I'm learning that using
replaceWith('<section>')
or
after('<section>')
Will actually insert the full element in each case:
<section></section>
And that when using end tags
replaceWith('</section>')
such calls seem to be ignored.
Is there someway to disable this behavior? I need to at one point in the DOM insert a start tag, and at another point insert an end tag.
wrapAll()
I can't get to work either. I think probably something to do with what is being wrapped aren't all siblings.....

i don't beleive jquery is going to allow this kind of behavior, because this will actually be allowing you to invalidate your markup.
dealing with the dom - it treats those groups of tags as "nodes". they are group up as objects with attributes and values and many other objects reliant upon them. so simply "moving the text" of the closing tag isn't a desired effect...
why not grab all of the stuff you want in "the middle" of your half tags... create a new element and then place your "filling" into it with append? something like this:
var theFilling = $('ul#theFilling'),
theCookieCrust = document.createElement('section');
$(theFilling).appendTo($(theCookieCrust));
$('ul#theFilling').remove();
$(theCookieCrust).appendTo('body');

Could be jquery used to modify html strings?

I have for example such piece of html:
var html = '<p>Title</p><b>edit me</b><i>remove me</i>';
I want to change title in it, but do not want to use regexp or string replace
functions for this, because if title would match tag name, then html could be corrupted.
I now trying to adopt jQuery for this, because it seems capable, but in reality things not so easy. Here is code:
$( $(html)[0] ).text('New title');
console.log(html); // --> prints out original html with old title
Any idea how to make this code work if it is at all possible ?

html = $('<div/>').html(html).find('p').text('New title').end().html();
http://jsfiddle.net/bEUHN/
Note: There are 3 wrapper elements in the created jQuery object using $(html), for selecting the p element you should use filter method.
$(html).filter('p').text('New title');