Javascript 如何动态添加<；a>；给出HTML页面索引的标记'；谁的绳子？

我正在为我的网站做一个搜索功能。到目前为止，我已经在整个网站中找到了用户搜索的字符串，并且我能够打印字符串和字符串的上下文。我通过在HTML页面上使用

$.get

，然后剥离HTML以保留我要搜索的纯文本来实现这一点。然后我找到我要查找的字符串的索引，然后使用

substr

查找输入字符串的上下文（前面和后面的一些索引）

现在，当用户单击搜索结果时，我需要链接到原始页面。我的研究表明要使用

标记，但是如何使用我的索引动态地将它们插入HTML页面？我的索引甚至不是完整的页面；它没有标签

以下是我的代码的相关部分：

JavaScript:

function getIndicesOf(searchStr, str) { //get the indices of searchStr inside of str
    var searchStrLen = searchStr.length;
    if (searchStrLen == 0) {
        return [];
    }
    var startIndex = 0, index, indices = [];
    str = str.toLowerCase();
    searchStr = searchStr.toLowerCase();
    while ((index = str.indexOf(searchStr, startIndex)) > -1) {
        indices.push(index);
        startIndex = index + searchStrLen;
    }
    return indices;
}

function search() {

    obj=document.getElementById("searchButton");
    obj.onclick = function() {

        var searchInput = document.getElementById('searchBox').value;

        var allPageContent = ['chap/telem.php', 'chap/nestor.php', 'chap/aeolus.php', 'chap/calypso.php', 'chap/circe.php', 'chap/cyclops.php', 'chap/eumaeus.php', 'chap/hades.php','chap/ithaca.php', 'chap/lestry.php', 'chap/lotus.php', 'chap/nausicaa.php', 'chap/oxen.php', 'chap/penelope.php', 'chap/proteus.php', 'chap/scylla.php', 'chap/sirens.php', 'chap/wrocks.php']; //contains all text

        var allText = '';

        for (var i = 0; i < allPageContent.length; i++){
            $.get(allPageContent[i], function(data){

                var div = document.createElement("div");
                div.innerHTML = data;
                //allText = div.textContent || div.innerText || ""; //gets the text to search in, stripped of html
                alltext = data;
                allText = allText.replace(/(\r\n\t|\n|\r\t)/gm," ");
                console.log(data);

                var indices = getIndicesOf(searchInput, allText); //the variable indices is the array that contains the indices of the searched text in the main text

                indices.forEach(findContext);
            })
        }

        localStorage.output = '';

        function findContext(currentValue, index) {

            if (currentValue <= 16) {
                searchContext = "..." + allText.substr(currentValue, 100) + "...";
            } else {
                searchContext = "..." + allText.substr(currentValue-15, 100) + "...";
            }

            localStorage.output = localStorage.output + searchContext + "<br /><br />";
        }
        console.log(localStorage.output);
    };

};

函数getindicatesof（searchStr，str）{//获取str中searchStr的索引
var searchStrLen=searchStr.length；
如果（searchStrLen==0）{
返回[]；
}
var startIndex=0，指数，指数=[]；
str=str.toLowerCase（）；
searchStr=searchStr.toLowerCase（）；
而（（index=str.indexOf（searchStr，startIndex））>-1）{
指数。推送（指数）；
startIndex=索引+搜索列表；
}
回报指数；
}
函数搜索（）{
obj=document.getElementById（“searchButton”）；
obj.onclick=函数（）{
var searchInput=document.getElementById（'searchBox'）。值；
var allPageContent=['chap/telem.php'、'chap/nestor.php'、'chap/aeolus.php'、'chap/calypso.php'、'chap/circe.php'、'chap/cyclops.php'、'chap/eumaeus.php'、'chap/ithaca.php'、'chap/lotus.php'、'chap/nausica.php'、'chap/oxen.php'、'chap/penelope.php'、'chap/proteus.php'、'chap/scylla.php'、'chap/sirens.php'、'chap/wrocks.php']；//包含所有文本
var-allText=''；
对于（变量i=0；i如果（currentValue考虑到您的HTML，但回答这个问题时，您试图实现的目标有点混乱

我的研究表明使用
标记，但如何动态插入
那些进入HTML页面的索引我有

这样就行了

var output = document.getElementById("output");

var a = document.createElement("a");
var linkText = document.createTextNode("my linked text");
a.appendChild(linkText);
a.href = "http://example.com";

output.appendChild(a);

我知道这可以将标记附加到给定id的对象上。但我遇到的问题是，我想将标记附加到网页上。我使用$.get从整个网页中生成一个字符串，因此我知道我要放置标记的字符串的索引。如果我不清楚，我很抱歉，但我想你已经知道我问题的要点了谢谢！@Andy你知道这些网页的结构吗？在你的
数据
中，如果你似乎已经说过了结构。只需在
数据
的正确位置添加
标签。
var output = document.getElementById("output");

var a = document.createElement("a");
var linkText = document.createTextNode("my linked text");
a.appendChild(linkText);
a.href = "http://example.com";

output.appendChild(a);