Htykuut

I am currently trying to place something like this https://shortdomain.com/api?p=a-href-url-here.com before every link on my website in a specific div.

$main = get_the_content_with_formatting();

$stripped = str_replace('<a href="http://example.net/', '<a href="https://shortdomain.com/api?p=http://example.net/', $main);

The method above works, but only when the link is that URL, and with any other it obviously will just return the standard URL.

Is there a way that I can prefix my desired link to each href using JavaScript, or PHP?

Here's the selector of the contents inside of $main

#the-post > div.post-inner > div.entry > p > strong > a

Don't ever make the mistake of parsing HTML like text; it's not! Use a proper DOM parser to extract your values and then alter them.

<?php

$main = "<div><p>Here is some <a href='http://example.com/'>sample</a> text.</p></div>";

$dom = new DomDocument();

$dom->loadHtml($main, LIBXML_HTML_NODEFDTD | LIBXML_HTML_NOIMPLIED);

foreach ($dom->getElementsByTagName("a") as $anchor) {

    $href = $anchor->getAttribute("href");

    if ($href) {

        $anchor->setAttribute("href", "https://shortdomain.com/api?p=" . urlencode($href));

    }

}

echo $dom->saveHTML();

This is a good task for PHP's built-in DOMDocument and DOMXpath classes. Using xpath ensures that you only change anchors inside the div that you want.

$main = '<div class="post-inner"><div class="entry"><p><strong><a href="http://example.net">link</a></strong></p></div></div>';

$doc = new DOMDocument();

$doc->loadHTML($main, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);

$xpath = new DOMXpath($doc);

$anchors = $xpath->query('//div[contains(@class, "post-inner")]//a');

foreach ($anchors as $a) {

    $a->setAttribute('href', 'https://shortdomain.com/api?p=' . $a->attributes->getNamedItem('href')->nodeValue);

}

echo $doc->saveHTML();

Output:

<div class="post-inner"><div class="entry"><p><strong>

    <a href="https://shortdomain.com/api?p=http://example.net">link</a>

</strong></p></div></div>

Demo on 3v4l.org

You can use the attribute selector with jquery to match all desired elements and then use the method 'attr' to change the href attribute.

$("#the-post > div.post-inner > div.entry > p > strong > a[href="http://example.net/"]")

    .attr("href", "https://shortdomain.com/api?p=http://example.net/");

I didn't really test it, but it should work just fine.

If you are doing this client-side, it's pretty painless with javascript's querySelectorAll:

let as = document.querySelectorAll('#the-post .post-inner .entry p strong a')

as.forEach(a => a.href ="https://shortdomain.com/api?p="+a.href)

<a href="http://example.net/">Don't change</a>

<div id="the-post">

  <div class="post-inner">

    <div class="entry">

      <p>

      change these:

      <strong>

        <a href="http://example2.net/">some inside </a> <br />

         <a href="http://example3.net/">some other inside </a>

       </strong></p>

   </div>

  </div>

</div>

Get rid of the dummy website then.

$main = get_the_content_with_formatting();

$stripped = str_replace('href="', 'href="https://shortdomain.com/api?p=', $main);