getElementById заменяет HTML

Question

<script type="text/javascript">
   var haystackText = document.getElementById("navigation").innerHTML;

   var matchText = '<a href="http://mydomain.co/?feed=rss">Subscribe to RSS</a>';

   var replacementText = '<ul><li>Some Other Thing Here</li></ul>';

   var replaced = haystackText.replace(matchText, replacementText);

   document.getElementById("navigation").innerHTML = replaced;
</script>

Я пытаюсь заменить строку HTML-кода на что-то другое. Я не могу редактировать код напрямую, поэтому я использую Javascript для изменения кода.

Если я использую вышеуказанный метод Matching Text на обычной строке, такой как just 'Subscribe to RSS', я могу заменить его в порядке. Однако, как только я пытаюсь заменить строку HTML, код «терпит неудачу».

Кроме того, что если HTML, который я хочу заменить, содержит разрывы строк? Как бы я искал это?

<ul><li>\n</li></ul>

??

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

Редактировать: упомяну, я пишу этот скрипт в нижнем колонтитуле моей страницы, задолго до текста, который я хочу заменить, так что проблема не в том, что скрипт пишется до того, как я хочу перезаписать его. :)

Answer 1

В настоящее время вы используете String.replace(substring, replacement), который будет искать точное совпадение substring и заменять его на replacement, например.

"Hello world".replace("world", "Kojichan") => "Hello Kojichan"

Проблема с точными совпадениями состоит в том, что она не допускает ничего, кроме точных совпадений.

Чтобы решить эту проблему, вам придется начать использовать регулярные выражения. При использовании регулярного выражения вы должны знать о

• специальные символы, такие как ?, / и \, которые необходимо экранировать \?, \/, \\
• многострочный режим / регулярное выражение / м
• глобальное сопоставление, если вы хотите заменить более одного экземпляра выражения / regexp / g
• замыкания для разрешения нескольких экземпляров пробела \s+ для [1..n] символов пробела и \s* для [0..n] символов пробела.

Чтобы использовать регулярное выражение вместо сопоставления подстроки, вам просто нужно изменить String.replace("substring", "replacement") на String.replace(/regexp/, "replacement"), например.

"Hello world".replace(/world/, "Kojichan") => "Hello Kojichan"

Answer 2

С MDN :

Note: If a <div>, <span>, or <noembed> node has a child text node that
includes the characters (&), (<), or (>), innerHTML returns these
characters as &amp, &lt and &gt respectively. Use element.textContent
to get a correct copy of these text nodes' contents.

Таким образом, поскольку textContent (или innerText) не получит HTML-код, вам необходимо соответствующим образом изменить строку поиска.

Answer 3

Соответствие регулярных выражений HTML (кроме обычного текста), которое выходит из веб-страницы, является плохой идеей и затрудняет работу кросс-браузера (особенно в IE). HTML-код, который выходит из веб-страницы, не всегда выглядит так же, как вставленный, потому что некоторые браузеры восстанавливают HTML-код и фактически не сохраняют то, что было введено. Атрибуты могут изменять порядок, кавычки могут изменяться или исчезать, объекты могут изменить и т.д ...

Если вы хотите изменить целые теги, то вам необходимо получить прямой доступ к DOM и работать с реальными объектами на странице.

Answer 4

Рекомендую использовать Регулярное выражение . Заметить, что ? и / являются специальными символами в Регулярном выражении . А для глобального многострочного соответствия вам необходимо установить g и m флаги в регулярном выражении.

Answer 5

Вы можете использовать Регулярные выражения .