如何使用Javascript刪除方案後的超鏈接樣式？

所以我想顯示一個被Javascript抓到的url。它返回到JS的形式http://i.mygreatsite.com，但我想削減方案關，使之清潔，並有實際的代碼看起來像如何使用Javascript刪除方案後的超鏈接樣式？

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

我試着這樣做之前，我不得不設置一些網址上的特殊屬性，即將目標設置爲空白，以便在新選項卡中打開，並將超鏈接的顏色更改爲黑色，因爲頁面上的其他鏈接爲藍色。我去一下這樣的：

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); 

       }); 
      }

一切工作與它的罰款，但是當我去刪除我用正則表達式做了它的模式：

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";

現在的模式被刪除，但沒有我之前設置的屬性之前在那裏工作的屬性現在在那裏。該URL是藍色的，並在同一個標籤中打開。我在這裏錯過了什麼嗎？謝謝。

來源

2014-02-12 Lucifer N.

不知道爲什麼奇怪的行爲，可能是因爲您在標籤設置既href和您的innerHTML。正則表達式很有趣，但在這種情況下，爲什麼不將href設置爲原始響應文本，因爲這是鏈接的URL，而innerhtml到responsetext.slice（8，responsetext.length）< - 這將切片的前8個字符字符串，因此刪除https：// –

我也需要它刪除http：//，而不僅僅是https：// –

啊k，但我認爲問題在於您要在字符串中製作完整標記。我認爲你需要將href設置爲URL ='h ttp：//i.mygreatsite.com'，將innerHTML設置爲替換文本'i.mygreatsite.com'。你現在的做法是將它們設置爲：i.mygreatsite.com，這樣你就可以得到一個非常奇怪的構造，可能是href標記中的一個href標記，瀏覽器將試圖以可能意想不到的方式理解這一點 –

您已經結束得到的是另一個錨內的錨：

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

這是因爲設置你想創建錨的innerHTML的。在元素上設置樣式不會級聯（您應該真的使用CSS樣式表），當然，target元素將不適用，因爲它在技術上不會而是您點擊的超鏈接！

相反，只需使用您的Regex的$2結果設置innerHTML即可。

編輯

所以你更新的代碼將需要類似：

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"

來源

2014-02-12 20:35:42

所以我嘗試過： a.innerHTML = responseText.replace（/（https？：\/\ /（\ S +））/ i，「$2」）;結果仍然沒有應用於其上的樣式。如何在鏈接動態生成時使用樣式表設置這些鏈接，並在頁面加載後顯示？ –

不確定您是否使用JQuery，但在本地JS中，您可以使用DOM對象的'className'屬性設置'class'屬性。請參閱W3Schools：[HTML DOM className屬性]（http://www.w3schools.com/jsref/prop_html_classname.asp） –

更新了答案，快速瞭解我的意思。我希望澄清。 –

如何使用Javascript刪除方案後的超鏈接樣式？

回答

相關問題