Как записать изменения текста в HTML в браузере, используя JavaScript? - PullRequest
0 голосов
/ 21 января 2020

Существует веб-страница, с которой я хочу записать некоторый текст, когда этот текст изменяется. Текст, который я хочу записать (обозначен --->TEXT HERE в приведенном ниже коде), динамически изменяется в HTML, когда мышь наводит курсор на график SVG.

Когда я наводим указатель мыши на график SVG Я хочу сохранить любое измененное значение в этих двух текстовых узлах и сохранить их в структуре данных JavaScript, к которой я смогу получить доступ позже.

Я могу запустить дополнительный код JavaScript на странице, но я не может изменить ни один из уже существующих JavaScript, HTML или CSS.

HTML, содержащий текст, который я хочу записать, выглядит следующим образом:

[...]
<text x="8" data-z-index="1" style="font-size:12px;color:#333333;cursor:default;fill:#333333;" y="20">
    <span style="font-size: 10px">
    --->TEXT HERE
    </span>
    <span style="fill:#90ed7d" x="8" dy="15">+</span>
    <span dx="0"> Value: </span>
    <span style="font-weight:bold" dx="0">
    --->TEXT HERE
    </span>
</text>
[...]

В качестве примера я отсканировал следующий код, чтобы прояснить, что я хочу сделать:

// we do not want a blocking browser, so we need some sleep
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// here we are going to save the values from "--->TEXT HERE"
var myvalues = []

async function foo() {
    while(true){
        // Loop until I change the textcontent to "AAA" in the Inspector - stopping with a mouseclick anywhere would be nicer
        if (document.getElementsByTagName('text')[28].childNodes.item(0).textContent == "AAA") 
            break;

        val = document.getElementsByTagName('text')[28].childNodes.item(0).textContent +" "+ document.getElementsByTagName('text')[28].childNodes.item(3).textContent;
        if (!myvalues.includes(val)) 
            myvalues.push(val);

        console.log('Sleep');
        await sleep(100);
    }
}

foo();

Однако периодическая проверка изменений не гарантирует, что я увижу каждое изменение.

Как записать в некоторую JavaScript структуру данных каждое изменение в тексте в областях, указанных выше --->TEXT HERE?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...