我想使用另一个 div 中的文本内容突出显示段落中的文本内容。于是在第一个div里面就有了“增加整体代码”。我希望使用第一个 div 突出显示主要段落中的这些词。感谢您有机会在这里寻求帮助!
function highlight() {
var htext = document.getElementById("torles");
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0) {
innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
innerHTML.innerHTML = innerHTML;
}
}.highlight {
background-color: red;
}<html>
<body>
<div class="col-md-10 bordered selectborder fragment" id="torles">increase overall coder
</div>
<button onclick="highlight()">Highlight</button>
<div class="col-md-10 para bordered" id="inputText">
<strong><p>Significantly Reduce Costs and Improve Quality with an Experienced, Professional Global Coding Solution. Health Information Management (HIM) Directors and CFOs are seeking innovative ways to reduce expenses, maintain DNFB goals, and increase overall coder quality.</p></strong>
</div>
</body>
</html>最佳答案
所以，有几件事；但首先，这是一个工作示例。
function highlight() {
var text = document.getElementById("torles").textContent;//you want the text not the node
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0) {
innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
inputText.innerHTML = innerHTML;//this line was incorrect
}
}.highlight {
background-color: red;
}<html>
<body>
<div class="col-md-10 bordered selectborder fragment" id="torles">increase overall coder</div><!-- make sure there's no line break after "coder"-->
<button onclick="highlight()">Highlight</button>
<div class="col-md-10 para bordered" id="inputText">
<strong><p>Significantly Reduce Costs and Improve Quality with an Experienced, Professional Global Coding Solution. Health Information Management (HIM) Directors and CFOs are seeking innovative ways to reduce expenses, maintain DNFB goals, and increase overall coder quality.</p></strong>
</div>
</body>
</html>总之，主要有三件事(还有一个错字)。首先，在 increase overall coder 之后，您的 HTML 中有一个换行符，因此它会尝试在文本中找到带有换行符的字符串 ，所以它只会找不到它。
其次，您混淆了变量的实际含义；首先，text 变量(您拼错为 htext)是一个节点，而不是字符串。此外，您尝试设置 innerHTML 的 innerHTML，但您的变量 innerHTML 只是一个字符串。您想要设置节点的 innerHTML(在本例中为 inputText)。
关于javascript - 使用来自另一个 div 的内容突出显示文本内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53267822/