Выделите совпадающую часть строки в TD, когда наведен другой TD

Question

Выделите совпадающую часть строки в TD, когда наведен другой TD

0

Если я нахожусь над элементом TD, я хочу выделить часть строки в другом TD. Пример: если я наведите курсор на яблоко, я хочу выделить яблочную часть applebanana.

Я пробовал несколько вещей, но не стал ближе к любому решению. Спасибо за помощь.

Мой код до сих пор: нельзя использовать слово param, потому что он не определен. this.innerText не возвращает "яблоко". Также 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>

user2196234 05 март 2014, в 10:26

Источник

Теги:

javascript

html

css

1 ответ

Ещё вопросы

gpgekko · Accepted Answer · 2014-03-05T06-25-00.000Z

В этих ситуациях я всегда использую regexp и помещаю текст в элемент <mark>, который я удаляю позже.

Затем вы можете улучшить его, указав цвета и добавив их как стиль в элемент метки, но по умолчанию он дает желтый фон для текста (в большинстве браузеров). Элемент метки легко найти назад и обычно не используется ни для чего другого, поэтому он идеально подходит для этих вещей.

HTML:

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

Здесь решение полностью в native 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/

Я оставлю адаптацию, чтобы найти все элементы, чтобы подчеркнуть вас, сообщите мне, если вам нужна помощь в этом. Но, возможно, просто просматривая таблицу для появления слова, если я правильно прочитал ваш вопрос.

Я обновил свой оригинальный пост изменениями, которые я сделал на основе вашего ответа. Но это на самом деле ничего не делает. Я в недоумении здесь.
@ user2196234 Извините, мой плохой, должен быть дополнительный $(element).html() вокруг заменяющего кода, чтобы установить новое значение. Смотрите обновленный ответ.
@ user2196234 Также добавили полностью нативное решение, увидев, что это не вопрос jQuery.
Я сделал это, но это все еще не работает (обновленный вопрос содержания). На другом примечании: это нормально, что предупреждение (слово) печатает "неопределенный"?
@ user2196234 Если его в пределах highlightInput , то нет. Это означало бы, что параметры не установлены должным образом.
Это в рамках highlitInput. Теперь я заставил его работать, но он заменяет весь контент <mark> $ 1 </ mark>, а не только подстроку. также он включает в себя 1 доллар как буквальный, а не как ссылку. Я обновлю свой вопрос с моим полным кодом.
@ user2196234 Не видя больше кода, я не могу сказать наверняка, что случилось. Как вы можете видеть на скрипках, фрагменты их самостоятельной работы.
Обновил вопрос со всем моим кодом.
@ user2196234 Я поместил ваш код в jsfiddle, и он работает: jsfiddle.net/gpgekko/ra5wh (единственное, что я изменил, это строка в resetHighlight ). Видя, как вы используете решение jQuery, вы включили библиотеку jQuery на свою страницу? Кроме того, где вы положили код JS? Это выполняется сразу или внутри обработчика событий?
Я не использую решение jquery, насколько я вижу. Теперь я получил код для работы, но проблема остается в том, что слово до сих пор не определено, и я не знаю почему.
@ user2196234 По вашему вопросу вы показываете код решения jQuery. Решение с участием $ - это jQuery (jQuery регистрируется как $ в глобальном пространстве имен). word === undefined проблема, скорее всего, вызвано размещением кода. Функции должны быть определены перед элементом html на странице. Не помещайте их в обработчики onLoad или что-либо еще.
Код js находится внутри тегов <script> над тегом <html> моего файла. Может ли быть другое решение проблемы?
@ user2196234 Подождите, выше HTML? Вы имеете в виду таблицу или фактический <html> ? Если это позже, это не будет работать, потому что его никогда не собираются анализировать. Поместите его внутрь элемента <head> . Вы можете попробовать заменить innerText на textContent .