用Javascript删除方案后如何设置超链接样式？

Question

So I am trying to display a url that is caught by Javascript. It is returned to JS in the form http://i.mygreatsite.com , but I would like to cut the schema off to make it cleaner, and have the actual code look something like

<a href=http://i.mygreatsite.com>i.mygreatsite.com</a>

Before I tried doing this, I had to set some special attributes on the url, namely setting target to blank so it would open in a new tab and changing the color of the hyperlink to black, as the rest of the links on the page are blue. I went about it like this:

  init: function() {
                this.on("success", function(file, responseText) {
                    var span = document.createElement('span');
                    var a = document.createElement('a');
                    a.href = responseText;
                    a.innerHTML = responseText;
                    a.setAttribute('target', '_blank');
                    a.style.color="black";
                    span.appendChild(a);
                    span.setAttribute("style", "position: absolute; box-sizing: border-box; -webkit-box-sizing: border-box; bottom: -28px; left: 3px; right: 3px;  height: 28px; word-wrap: break-word; line-height: 28px; text-overflow: ellipsis; ");

                    file.previewTemplate.appendChild(span);

                });
            }

Everything worked fine with it, but when I went to remove the schema I did it by using regex:

repl = responseText.replace(/(https?:\/\/(\S+))/i, "<a href='$1'>$2</a>");
a.href = repl;
a.innerHTML = repl;
a.setAttribute('target', '_blank');
a.style.color="black";

Now the schema is removed, but none of the attributes I set previously that were working before are there now. The URL is blue and opens in the same tab. Am I missing something here? Thanks.

Answer 1

What you've ended up with is an anchor within another anchor:

<a target="_blank" style="XXX"><a href="http://myurl">myurl</a></a>

That's because of setting the innerHTML of the anchor you're trying to create. Setting styles on an element will not cascade (you should really use CSS Stylesheets instead) and of course the target element will not apply as it's technically not the hyperlink you're clicking on!

Instead, just set the innerHTML using the $2 result of your Regex.

Edit

So your updated code would need to be similar to:

repl = responseText.replace(/(https?:\/\/(\S+))/i, "$2");
a.href = responseText;
a.innerHTML = repl;
a.setAttribute('target', '_blank');
a.style.color="black";
//Or if you wanted to use CSS stylesheets
a.className = "myCssClass"