Search and replace a string with hyperlink

Question

I'm not sure if this is possible but I am helping out with a rather large website that was compiled with .aspx We are wanting to change a link on the website but there is no actual place to edit the text for the link. I can however use CSS or possibly Javascript to edit the site.

<li>
  <a href="otherpages.aspx" target="">Other Pages</a>
</li>
<li>
  <a href="bluepage.aspx" target="">Blue Page</a>
</li>

I want to change the link and text that says Blue Page to something such as Red Page. example:

<li>
  <a href="redpage.aspx" target="">Red Page</a>
</li>

Is it possible to search and replace the text for that hyperlink using CSS?

I have already tried creating an overlay that covers the original text and link but it doesn't position properly on the page depending on the browser the user uses. example:

<div id="cover"></div>


#cover {
background: url('../images/cover.png') no-repeat;
top: 80%;
margin-left: 0px;
height: 30px;
width: 203px;
position: relative;
}

Anyone have any other ideas on how I can possibly replace text with CSS or Javascript?

Your use case seems a little wonky. If you're a team that should legitimately be allowed to edit the site, you should have access to the source code. Which isn't "compiled into .aspx", it's generated from it. — Paul, Sep 08 '17 at 16:43
Possible duplicate of [find and replace string](https://stackoverflow.com/questions/5951801/find-and-replace-string) — Tijmen, Sep 08 '17 at 16:44
Paul, there is no team here any longer. No one is managing the website and they want me to take a look at it. It needs to be trashed in my opinion but I can't do anything about that right now. Yeah, I know nothing about .aspx. I'm a Python person. lol — Prox, Sep 08 '17 at 17:06

score 1 · Answer 1 · answered Sep 08 '17 at 16:43

1

Try something like this with JavaScript,

var bluePage = document.querySelectorAll("a[href='bluepage.aspx']");
if (bluePage[0]) {
    bluePage[0].setAttribute("href", "redpage.aspx");
    bluePage[0].innerHTML="Red Page";
}

answered Sep 08 '17 at 16:43

DileepNimantha

215
2
14

score 0 · Answer 2 · answered Sep 08 '17 at 16:43

CSS would only change the appearance of the link. The href URI would remain the same underneath, and if a user clicked the link, they'd be taken to the old link location. Hence, you need to use Javascript for this.

As per this answer, you can do search and replace with Javascript like so:

<script type="text/javascript">
function replaceScript() {
    var toReplace = 'http://google.com';
    var replaceWith ='http://yahoo.com';
    document.body.innerHTML = document.body.innerHTML.replace(toReplace, replaceWith);
}
</script>

And you can initialize this function on page load like so:

<body onload="replaceScript();">

That should replace the strings throughout the page. However, the major drawback here is that it only replaces the links on page load. The pages saved on your server will still have the old links, which means there will be a small delay (tens to hundreds of milliseconds, probably) when the user loads any page, because the script needs to do its work, which takes a little bit of time. Also, it won't work if the user has JavaScript disabled in their browser, or if it's visited by a non-browser agent (like bot, crawler or web service), which is less than perfect.

Search and replace a string with hyperlink

2 Answers2