Html 如果找到关键字，如何获取带有文本的行号

我有一个HTML表单 它在文本框（如Discover）中接受用户输入，然后从文本区域框打印 带文本的行号

Html代码：

<div>search</div>
<input type="text" id="needle" value="throw">
<div>this text</div>
<textarea id="haystack">Twenty years from now
you will be more disappointed 
by the things that you didn't 
do than by the ones you did do, 
so throw off the bowlines, 
sail away from safe harbor, 
catch the trade winds in your 
sails. Explore, Dream, Discover. 
    —Mark Twain
</textarea>
<input type="submit" value="Check" onClick="searchText()"> <br><br>
<div>results</div>
<textarea id="output"></textarea>

function searchText(){
// If you want to find the line number for a specific match you need to know it index
    function lineNumberByIndex(index,string){
        // RegExp
        var line = 0,
            match,
            re = /(^)[\S\s]/gm;
        while (match = re.exec(string)) {
            if(match.index > index)
                break;
            line++;
        }
        return line;
    }
    // if you want to find the first index of a match
    function lineNumber(needle,haystack){
        return lineNumberByIndex(haystack.indexOf(needle),haystack);
    }
    // if you want an array of matches
    function lineNumbers(needle,haystack){
        if(needle !== ""){
            var i = 0,a=[],index=-1;
            while((index=haystack.indexOf(needle, index+1)) != -1){
                a.push(lineNumberByIndex(index,haystack));
            }
            return a;
        }
    }
    function update(){
        var needle = $('#needle').val();
        var haystack = $('#haystack').val();
        var output = $("#output").val();
        var nums = lineNumbers(needle,haystack);
        var s = "\"" + needle + "\" is on lines " + nums.join(',') + "\n";
        if(nums.length)
            $("#output").val(s + output);
        else
            $("#output").val("-\n" + output);
    }
    $("input,textarea.input").on("input",update);
    update()
}

.css

* {font:1em arial}
input {width:400px;;padding:5px}
textarea {width:400px;height:200px;padding:5px;}

我必须通过创建按钮点击来调用，但它会打印异常文本，如果我删除搜索文本并在按钮点击上重新输入任何其他文本，文本会出现n次

如何编写可以搜索文本并打印其行号和文本的代码

代码取自此处：

异常输出：

"harbor" is on lines 6
"harbor" is on lines 6
"harbor" is on lines 6
"harbor" is on lines 6
"harbor" is on lines 6
"harbor" is on lines 6
"harbor" is on lines 6
"harbor" is on lines 6
"harbor" is on lines 6
"harbor" is on lines 6
"harbor" is on lines 6
"harbor" is on lines 6
"harbor" is on lines 6
"harbor" is on lines 6
"harbor" is on lines 6

---

您可以使用

.textContent

获取文本，并使用

split（'\n'）

获取数组中的每一行。然后，获取数组的长度

.split（'\n'）

在末尾返回一个额外的字符串，因此您必须忽略该字符串

document.querySelector('#haystack').textContent.split('\n')

---

您需要在事件侦听器中运行该行，以便它始终更新。

您可以使用

.textContent

获取文本，并使用

拆分（'\n'）

获取数组中的每一行。然后，获取数组的长度

.split（'\n'）

在末尾返回一个额外的字符串，因此您必须忽略该字符串

document.querySelector('#haystack').textContent.split('\n')

您需要在事件侦听器中运行该行，以便它始终更新。

下面是一个简单的示例（该示例也适用于不区分大小写）：

const EL_searchField=document.querySelector（“#searchField”）；
const EL#u searchArea=document.querySelector（“#searchArea”）；
const EL#u searchResult=document.querySelector（“searchResult”）；
const EL#u searchButton=document.querySelector（“#searchButton”）；
常量搜索=（）=>{
const val=EL_searchField.value.trim（）；//完全按照它所说的做
const txt=EL_searchArea.value.trim（）；//完全按照它所说的做
//使用.reduce（）拆分行并将它们全部作为字符串放入数组
const result=txt.split（/\n/）.reduce（（arr，line，i）=>{
if（line.toLowerCase（）.includes（val.toLowerCase（）））{
arr.push（`Line${i+1}:${（Line.replace（newregexp（val，“ig”），“$&”）}`）；
}
返回arr；
}, []);
//如果没有txt或val：请使用空字符串“”
//否则，将我们的数组s连接到一个HTML字符串s中
EL_searchResult.innerHTML=（！val | |！txt）？“”：result.join（“”）；
};
EL_searchField.addEventListener（“输入”，搜索）；
EL_searchArea.addEventListener（“输入”，搜索）；
EL_searchButton.addEventListener（“单击”，搜索）；
搜索（）
*{边距：0；框大小：边框框；}
正文{font:14px/1.4无衬线；}
.flex{display:flex；}
#搜索区域{宽度：400px；最大宽度：50%；高度：160px；}
#搜索结果div{gap:10px；}
#搜索结果i{不透明度：0.5；空白：nowrap；}
#搜索结果b{color:blue；}

搜寻
二十年后
你会更失望的
因为你没有做的事
比你所做的更重要，
所以扔掉保龄球，
驶离安全港，
抓住信风，把你的心扔进去
帆。探索、梦想、发现。
-马克吐温
下面是一个简单的示例（它也适用于不区分大小写）：


const EL_searchField=document.querySelector（“#searchField”）；
const EL#u searchArea=document.querySelector（“#searchArea”）；
const EL#u searchResult=document.querySelector（“searchResult”）；
const EL#u searchButton=document.querySelector（“#searchButton”）；
常量搜索=（）=>{
const val=EL_searchField.value.trim（）；//完全按照它所说的做
const txt=EL_searchArea.value.trim（）；//完全按照它所说的做
//使用.reduce（）拆分行并将它们全部作为字符串放入数组
const result=txt.split（/\n/）.reduce（（arr，line，i）=>{
if（line.toLowerCase（）.includes（val.toLowerCase（）））{
arr.push（`Line${i+1}:${（Line.replace（newregexp（val，“ig”），“$&”）}`）；
}
返回arr；
}, []);
//如果没有txt或val：请使用空字符串“”
//否则，将我们的数组s连接到一个HTML字符串s中
EL_searchResult.innerHTML=（！val | |！txt）？“”：result.join（“”）；
};
EL_searchField.addEventListener（“输入”，搜索）；
EL_searchArea.addEventListener（“输入”，搜索）；
EL_searchButton.addEventListener（“单击”，搜索）；
搜索（）
*{边距：0；框大小：边框框；}
正文{font:14px/1.4无衬线；}
.flex{display:flex；}
#搜索区域{宽度：400px；最大宽度：50%；高度：160px；}
#搜索结果div{gap:10px；}
#搜索结果i{不透明度：0.5；空白：nowrap；}
#搜索结果b{color:blue；}

搜寻
二十年后
你会更失望的
因为你没有做的事
比你所做的更重要，
所以扔掉保龄球，
驶离安全港，
抓住信风，把你的心扔进去
帆。探索、梦想、发现。
-马克吐温
.on（“更改键控粘贴”
nono只需使用
.on（“输入”
@Roko C.Buljan您能再次检查问题吗？）输出显示异常我添加了.on（“输入”在我的codeWait中，你是在问总共有多少行，还是一个单词出现在哪几行？@Rojo如果我输入任何单词，它应该显示它的行号和整行文本。如果我清除文本框的内容，那么结果区域应该被清除
.on（“更改按键粘贴”
nono只需使用
.on（“输入”）
@Roko C.Buljan你能再次检查问题吗？输出显示异常我添加了.on（“输入”）在我的代码等待中，你是在问总共有多少行，或者一个单词出现在哪几行？@Rojo如果我输入任何单词，它应该用整行文本显示它的行号。如果我清除文本框的内容，那么结果区域应该被清除。你能修改代码并告诉我怎么做吗…？你能帮我解决这个问题吗关于按钮点击的详细信息如果文本框作为一些详细信息扫描您修改了代码并告诉我如何做…？您能帮助我如何获取关于按钮点击的详细信息如果文本框作为一些详细信息=>谢谢兄弟会试着理解code@codeholic24编辑