如何动态添加<a> tags given an index of HTML page&#39;s string?

Question

I'm making a search function for my website. So far, I've found the string the user searches for in the whole website, and I'm able to print the string and the context of the string. I have achieved this by using $.get on my HTML pages, then stripping the HTML to leave the pure text I want to search in. I then find the index of the string I'm looking for, then use substr to find the context of the input string (a few indexes ahead and behind).

Now, I need to link to the original page when a user clicks on a search result. My research says to use <a> tags, but how do I dynamically insert those into the HTML page with the index I have? And the index I have isn't even the complete page; it's stripped of tags.

These are the relevant parts of my code:

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

};

HTML:

<script>document.getElementById("output").innerHTML = localStorage.output;</script>

Answer 1

考虑到你的HTML，你想要实现的目标有点令人困惑，但回复这个

  

我的研究表明使用<a>标签，但我该如何动态插入   那些带有我索引的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);