Javascript 当其他TD悬停时，高亮显示TD中字符串的匹配部分

如果我将鼠标悬停在一个TD元素上，我想突出显示另一个TD中字符串的一部分。示例：如果我将鼠标悬停在苹果上，我想突出显示苹果的部分

我尝试了几件事，但都没有找到解决办法。谢谢你的帮助

我的代码到现在为止：无法使用word param，因为它未定义。this.innerText不返回“apple”。 此外，在mouseout中，字符串的高亮部分也会被删除

function hightlightInput(word){
    $(document.getElementById("testid")).html($(document.getElementById("testid")).html().replace(new RegExp("(apple)(?![^\">]*\"[^>]*>)", "i"), "<mark>$1</mark>"));
}

function resetHighlight() {
    $(document.getElementById("testid")).find("mark").replaceWith(function() {
        return $(document.getElementById("testid")).contents();
    });
}

功能高亮输入（word）{
$（document.getElementById（“testid”））.html（$（document.getElementById（“testid”））.html（）.replace（新的RegExp（（（苹果）（？！[^\”>）*\“[^>]*>），“i”），“$1”）；
}
函数resetHighlight（）{
$（document.getElementById（“testid”））.find（“mark”）.replaceWith（function（）{
return$（document.getElementById（“testid”）.contents（）；
});
}

HTML

苹果
苹果树

在这些情况下，我总是使用regexp并将文本放入

元素中，稍后将其删除

然后，您可以通过提供颜色并将其作为样式添加到mark元素中来改进它，但默认情况下，它为文本提供黄色背景（在大多数浏览器中）。mark元素很容易找到，通常不用于其他任何东西，因此它非常适合这些东西

HTML:

苹果树
苹果

---

下面是一个完全使用本机JS的解决方案：

function highlightInput(element, word) {
    element.innerHTML = element.innerHTML.replace(new RegExp("(" + word + ")(?![^\">]*\"[^>]*>)", "i"), "<mark>$1</mark>");
}
function resetHighlight(element) {
    var marks = element.getElementsByTagName("mark");
    var marksLength = marks.length;
    for(var i = (marksLength - 1); i >= 0; --i)
    {
        element.replaceChild(document.createTextNode(marks[i].innerText), marks[i]);
    }
}

功能高亮输入（元素、字）{
element.innerHTML=element.innerHTML.replace（新的RegExp（“（“+word+”）（！[^\“>]*\“[^>]*>）”，“i”），“$1”）；
}
函数重置高亮显示（元素）{
var marks=element.getElementsByTagName（“标记”）；
var marksLength=marks.length；
对于（变量i=（标记长度-1）；i>=0；--i）
{
元素.replaceChild（document.createTextNode（标记[i].innerText），标记[i]）；
}
}

小提琴：

---

以下是使用库的解决方案：

功能高亮输入（元素、字）{
$（element）.html（$（element）.html（）.replace（新的RegExp（“（“+word+”）（！[^\“>]*\“[^>]*>）”，“i”），“$1”）；
}
函数重置高亮显示（元素）{
$（元素）。查找（“标记”）.replaceWith（函数（）{
返回$（this.contents（）；
});
}

小提琴：

---

我将把改编留给你去寻找所有需要突出显示的元素，如果你需要帮助，请告诉我。但是如果我没有看错你的问题，可能只是在表格中查找单词的出现情况。

我已经根据你的答案对我的原始帖子进行了更新。但它实际上什么也没做。我在这里不知所措。@user2196234对不起，我的错，需要在替换代码的周围添加一个

$（element）.html（）

，以设置新值。请参阅更新的答案。@user2196234还添加了一个完全本机的解决方案，看看它如何不是jQuery问题。我这样做了，但它仍然不起作用（更新的问题内容）。另一个注意事项：警报（word）打印“未定义”是否正常？@user2196234如果在

highlightInput

内，则为否。这意味着参数设置不正确。

<table>
    <tr><td id="change">applebanana</td></tr>
    <tr><td onMouseOver="highlightInput(this, this.textContent)"onMouseOut="resetHighlight(this)">apple</td></tr>
</table>

function highlightInput(element, word) {
    element.innerHTML = element.innerHTML.replace(new RegExp("(" + word + ")(?![^\">]*\"[^>]*>)", "i"), "<mark>$1</mark>");
}
function resetHighlight(element) {
    var marks = element.getElementsByTagName("mark");
    var marksLength = marks.length;
    for(var i = (marksLength - 1); i >= 0; --i)
    {
        element.replaceChild(document.createTextNode(marks[i].innerText), marks[i]);
    }
}

function highlightInput(element, word) {
    $(element).html($(element).html().replace(new RegExp("(" + word + ")(?![^\">]*\"[^>]*>)", "i"), "<mark>$1</mark>"));
}
function resetHighlight(element) {
    $(element).find("mark").replaceWith(function() {
        return $(this).contents();
    });
}