在页面源代码中查找文本并创建超链接

我需要使用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我们的网络上的限制。

来源

2015-09-25 user1683689

使用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”的读者，这个函数可能看起来很熟悉:)。

来源

2015-09-25 13:57:00 Robert

哇！为什么不使用官方的[TreeWalker]（https://developer.mozilla.org/en/docs/Web/API/TreeWalker）？而不是你自制的DOM漫步者？ – Kaiido

我其实没有用过 - 看起来很有趣。我简单地检查了一下，它可能更容易使用我在答案中写的内容，而不是找出那个对象。如果使用TreeWalker有一个更简单的解决方案，你应该发布一个答案。我很想看看你如何使用它。 – Robert

感谢大家的帮助，我使用HTML元素的原因是我是一个总noob，并不知道任何更好的！我希望你的DOM方法能够工作 - 我将如何通过document.write显示在屏幕上找到的用户ID？ – user1683689

在页面源代码中查找文本并创建超链接

回答

相关问题