Изменить текст на <p>, не затрагивая остальное на <span> - PullRequest
Новая
       13

Изменить текст на <p>, не затрагивая остальное на <span>

0 голосов
/ 04 ноября 2019

Я новичок в Javascript. Я пытаюсь написать пользовательский скрипт для Chrome с Tampermonkey. Мне удалось создать некоторый код, чтобы заменить некоторые слова в <p> на укороченную версию, но, к сожалению, остальная часть текста, включая другой код, не работает.

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

function run () {
        var target = document.querySelector('#dipContainer dip-info-top div.new-dip-info div.col-md-4 div:nth-child(2) div:nth-child(1) p')
        if (target) {
            var str = target.innerHTML;
            str = str.replace(" String to find", "Shortened");
            target.innerHTML = str;
        } else {
            setTimeout(run, 500);
        }
    }
//The below detect any time the <p> changes and run the code to shorten the term. It works.
waitForKeyElements (
    "#dipContainer dip-info-top div.new-dip-info div.col-md-4 div:nth-child(2) div:nth-child(1) p",
    run
);
})();

К сожалению, <p> также содержит некоторый другой код после строки, которую я хотел сократить, что позволяет вамнажать на некоторые из них, чтобы получить статистику. 

<span class="player-info-stat">
                        <a class="badge ng-binding disabled" ng-class="{'disabled': history.itemModerationCount === 0}" ng-click="history.itemModerationCount > 0 ? openHistoryModal('itemHistory') : null" data-ol-has-click-handler="">0</a>
</span>

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

Кто-нибудь знает почему? Из того, что я искал, команда replace должна только изменить нужный текст и оставить остальные нетронутыми?

1 Ответ

0 голосов
/ 04 ноября 2019

Похоже, что дочерние элементы имеют прослушиватели событий, и в этом случае переназначение innerHTML родительского элемента повредит прослушиватели.

Вместо замены innerHTML, поиск текстовых узлов,и установите значение их узла для замененного текста: 

// /2124767/getelementsbytagname-ekvivalent-dlya-textnodes

function nativeTreeWalker(parent) {
  var walker = document.createTreeWalker(
    parent,
    NodeFilter.SHOW_TEXT,
    null,
    false
  );

  var node;
  var textNodes = [];

  while (node = walker.nextNode()) {
    textNodes.push(node);
  }
  return textNodes;
}

document.querySelector('p').addEventListener('click', () => console.log('p clicked'));
const textNodes = nativeTreeWalker(document.querySelector('#div'));
textNodes.forEach((textNode) => {
  textNode.nodeValue = textNode.nodeValue.replace(/text/g, 'replaced');
});
<div id="div">
  text
  <p>clickable</p>
  text
</div>
...