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: Don't urlify links that were code-prettified before

I have a regex that first prettifies any text between back-ticks (``) as code. And then I use another regex that detects urls and generates anchor tag. Just like stackoverflow's editor. The problem is I don't want to urlify the links in code-prettified part.
For example the first url in the following example should be urlified but the second one shouldn't:
To generate a link to http://stackoverflow.com you should write
StackOverflow

Chrome extension breaks DOM

I'm making a Chrome extension that replaces certain text on a page with new text and a link. To do this I'm using document.body.innerHTML, which I've read breaks the DOM. When the extension is enabled it seems to break the loading of YouTube videos and pages at codepen.io. I've tried to fix this by excluding YouTube and codepen in the manifest, and by filtering them out in the code below, but it doesn't seem to be working.
Can anyone suggest an alternative to using document.body.innerHTML or see other problems in my code that may be breaking page loads? Thanks.
var texts=["some text","more text"];
if(!window.location.href.includes("www.google.com")||!window.location.href.includes("youtube.com")||!window.location.href.includes("codepen.io")){
for(var i=0;i<texts.length;i++){
if(document.documentElement.textContent || document.documentElement.innerText.includes(texts[i])){
var regex = new RegExp(texts[i],'g');
document.body.innerHTML = document.body.innerHTML.replace(regex,
"<a href='https://www.somesite.org'>replacement text</a>");
}
}
}

Using innerHTML to do this is like using a shotgun to do brain surgery. Not to mention that this can even result in invalid HTML. You will end up having to whitelist every single website that uses any JavaScript at this rate, which is obviously not feasible.
The correct way to do it is to not touch innerHTML at all. Recursively iterate through all the DOM nodes (using firstChild, nextSibling) on the page and look for matches in text nodes. When you find one, replace that single node (replaceChild) with your link (createElement), and new text nodes (createTextNode, appendChild, insertBefore) for any leftover bits.
Essentially you will want to look for a node like:
Text: this is some text that should be linked
And programmatically replace it with nodes like:
Text: this is
Element: a href="..."
Text: replacement text
Text: that should be linked
Additionally if you want to support websites that generate content with JavaScript you'll have to run this replacement process on dynamically inserted content as well. A MutationObserver would be one way to do that, but bear in mind this will probably slow down websites.

JS: Regex - replace parts of domains in full text

I'm confronted with a problem. I have a whole html page stored in one variable and I would like to change certain URLs that meets criteria.
We are looking only for certain top level domain, let's say ".XYZ" and if we find it we would like the ending to be ".XYZ.ABC" - just adding ".ABC".
For example link would be changed to link
But if domain already has ".abc" ending we should leave it alone.
I would like to change text of all links, so src, href and also js values like var link="123.xyz/1.bmp";
Other examples
www.123.xyz -> www.123.xyz.abc
abc.xyz/1.bmp -> abc.xyz.abc/1.bmp
eee.xyz.abc -> eee.xyz.abc

Something like this should work:
text.replace(/\.xyz(?!\.abc)/g, ".xyz.abc")

Need to do a find & replace of link tags

So we have a site that allows content from users to be submitted, however, many users are not following the instructions when adding links to their content (it's a job board site).
The issue is we're ending up with:
www.test.com
Is there a way to have jQuery go through the text of an entire DIV and take whatever is in-between the tags and place it inside the href?
I can't seem to figure out how to grab what's in-between those tags.
Thanks!
Dan

Yes.
$('a').attr('href', function () {
return 'http://' + $(this).text()
})
jsFiddle example