在頁面源代碼中查找文本並創建超鏈接

Question

我需要使用JavaScript來搜索當前頁面的源代碼中的字符串，例如data-userId="2008"，然後提取id號（本例中爲2008），並創建一個超鏈接包括它，例如http://www.google.com?2008。

我一直在嘗試使用indexOf和document.documentElement.innerHTML方法，但沒有得到任何地方。在this post的幫助下，我已經接近了，但還沒有成功。

這是我到目前爲止有：

<script type="text/javascript"> 
function getVals() { 
    code = document.getElementsByTagName("html")[0].innerHTML; 
    results = code.match(/data-userId=(\d*)&/g); 
    for (i=0;i<results.length;i++) { 
     value = results[i].match(/data-userId=(\d*)&/); 
    } 
} 
onload = getVals; 
document.write(code); 
    </script> 

由於解決方案需要的JavaScript我們的網絡上的限制。

Answer 1

使用Element對象的getAttribute（）方法http://www.w3schools.com/jsref/met_element_getattribute.asp。

我不確定爲什麼你會查詢html元素，然後看看innerHTML。你不知道哪些標籤/選擇器將包含你正在尋找的數據屬性嗎？如果你不知道你正在尋找哪個選擇器，你可以使用像這樣的遞歸函數來遍歷DOM並將值存儲在你選擇的數據結構中 - 在本例中我將使用一個對象數組（不是確定你需要如何格式化這些數據）。

此外，我不確定您是如何選擇訪問這些頁面的，但是可以輕鬆修改以下代碼，以便在/如果找到您正在查找的屬性時創建超鏈接。

var storeElements = []; 

function walkTheDOM(node){ 
    if(node.getAttribute('data-userId') !== null){ 
     storeElements.push({"element": node, "attrValue": node.getAttribute('data-userId'}); 
    } 

    node = node.firstChild; 
    while(node){ 
     walkTheDOM(node); 
     node = node.nextSibling; 
    } 
} 

然後，你可以調用該函數是這樣的：

walkTheDOM(document.querySelectorAll('html')[0]); 

如果這是不是你要找什麼讓我知道，我可以改變我的答案。對於那些讀過道格拉斯克羅克福德的「Javascript：The Good Parts」的讀者，這個函數可能看起來很熟悉:)。