Search code examples
javascriptinnerhtmlgetelementsbytagname

URL automatically apending to page URL

I'm trying to use a getElementsByTagName to swap out some text in the body section of my website and replace it with a hyperlink. The problem is instead of giving me the link I'm specifying instead I get https://www.example.com/section1/"https://www.example.com/section2".

Here's my code:

<script>
window.onload = function() {
    var string = document.getElementsByTagName('body')[0].innerHTML;
    var replacedString = string.replace(/msAb/gi,"<a href = &quot;https://www.example.com/sectiontitle&quot'>hyperlinktext</a>");
    document.getElementsByTagName('body')[0].innerHTML = replacedString;
}
</script>

I'd appreciate your suggestions.

Thanks!

Solution

  • Link element href values are normally supplied as quoted strings in HTML source. But in practice, and without suggesting you do so, the quotes can be omitted. So the HTML parser is going to remove quotes from around the href value if it sees them there. The HTML parser also replaces character entities like &quot; with the character the entity represents - in this case double quote marks.

    The order in which the parser attempts to remove quote marks around the href attribute and replace character entities determines the result. You have amply demonstrated removing actual quote marks comes first. The href value, which ended up having quotation marks in it, after character entity replacement, is seen as a relative reference and produces the relative link you posted.

    So take out the character entities from the string. Either escape the quotes in JavaScript with backslash, or use double quotes inside a single quoted string.