Question

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

我尝试了几件事，但没有接近任何解决方案。谢谢你的帮助。

我的代码到目前为止：不能使用word param，因为它未定义。 this.innerText不会返回“apple”。同样在onMouseout上，字符串的高亮显示部分会被删除。

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

HTML

<table>
<tr>
   <td onMouseOver="hightlightInput(this.innerText)"onMouseOut="resetHighlight()">apple</td>
   <td id="testid">applebanana</td>
</tr>
</table>

Answer 1

在这些情况下，我总是使用正则表达式并将文本放在<mark>元素中，稍后我会将其删除。

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

HTML：

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

以下是本机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]);
    }
}

小提琴：http://jsfiddle.net/gpgekko/LshW6/1/

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

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

小提琴：http://jsfiddle.net/gpgekko/LshW6/

我将离开改编版以找到所有要突出的元素，如果您需要帮助，请告诉我。但如果我正确地阅读你的问题，它可能只是在表格中查找该词的出现。

当其他TD悬停时，突出显示TD中字符串的匹配部分

1 个答案: