时间戳

首页 > 解决方案 > 如何计算某个单词在 JavaScript 中充满文本的 div 中出现的次数？

javascript - 如何计算某个单词在 JavaScript 中充满文本的 div 中出现的次数？

问题描述

我正在尝试创建一个与按钮相关联的事件函数，当您在文本区域中输入短语后单击该按钮时，会计算该短语在文本中出现的次数（仅 p 元素）并同时输出值（多少次）到此函数创建的跨度元素中。

预期的结果是： 在此处输入图像描述

这是我的html：

<body>
<div id="main">
<p>The Phoenix Suns are a professional basketball team based in Phoenix, 
    Arizona. They are members of the ...</p>
<p>The Suns have been generally successful since they began play as an
 expansion team in 1968. In forty years of play they have posted ...</p>
<p>On January 22, 1968, the NBA awarded expansion franchises to an ownership 
group from Phoenix and one from Milwaukee. ...</p>
<ul>
    <li>Richard L. Bloch, investment broker/real estate developer...</li> 
    <li>Karl Eller, outdoor advertising company owner and former...</li>
    <li>Donald Pitt, Tucson-based attorney;</li>
    <li>Don Diamond, Tucson-based real estate investor.</li>
</ul>
</div>

<p>
Page by Marty Stepp. <br />
Some (all) information taken from Wikipedia.
</p>
<hr />

<div>
Search for text:
<input id="searchtext" type="text"  /> 
<button id="searchbutton">Search</button>
</div>
</body>

这是我的 js 函数：

function count_search(event){
let span = document.createElement('span');
span.setAttribute("id", "output");
document.body.appendChild(span);
var searchPhrase = document.querySelector("#searchtext").value;
var main = document.querySelector("#main");
var mainParas = main.querySelectorAll(" p ").textContent;
document.getElementById("#output").innerHTML = 
          (mainParas.match(/searchPhrase/g)).length;
/*var times = (mainParas.match(/searchPhrase/g) || []).length;
var content = "Searched for the word '" + searchPhrase + "' for " + times + " 
times. "; 
document.getElementById("output").innerHTML = content; */
}

但是，结果只是不会显示。你能帮我么？任何建议都非常感谢！

标签： javascripthtmlcssdom

解决方案

此代码可能会对您有所帮助。它获取p主 div 类型的所有子元素，获取它们的内容并将它们连接成一个字符串。然后它在该字符串中搜索输入到输入字段中的单词并返回出现次数。

单词搜索是使用带有两个修饰符的正则表达式完成的：g让搜索在第一次匹配后继续进行，并且i忽略大写。

请注意当您输入“dolor”时它如何返回 2，因为 dolor 的第三次出现在一个li元素中，而不是 ap中。

function search() {
    // Get the word to count
    var searchString = document.getElementById("input").value;
    var textDiv = document.getElementById("main");
    // Get all p elements in the main div
    var childNodes = textDiv.getElementsByTagName('p')
    // Store all text from the child elements in a single string
    var completetext = ""
    for(var i = 0; i < childNodes.length; i++) {
        completetext = completetext + childNodes[i].innerHTML
    }
    // Search the string and count the ocurrences
    var regEx = new RegExp(searchString, "gi");
    // When match() returns 0, replace it with an empty array
    // to make the length work in this case
    var count = (completetext.match(regEx) || []).length
    result.innerHTML = count;
}
<div id="main">
    <p>Lorem ipsum dolor sit amet. Lorem ipsum</p>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum</p>
    <li>dolor sit amet.</li>
</div>
<input type="text" id="input">
<button id="button" onclick="search()">Search</button>
<span id="result">

推荐阅读