Модифицируйте исходный HTML-код с помощью xPath, используя JavaScript

Question

Допустим, у меня есть источник HTML, что-то вроде:

<a href="http://google.com">Google</a>
<a href="http://yahoo.com">Yahoo</a>
<a href="http://msn.com">MSN</a>

Можно ли как-нибудь изменить этот источник HTML с помощью xPath с помощью Javascript: найти все якоря, добавить к ним текст и показать новый источник HTML с помощью окна предупреждения?

<a href="http://google.com">Visit Google</a>
<a href="http://yahoo.com">Visit Yahoo</a>
<a href="http://msn.com">Visit MSN</a>

Answer 1

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

Я думаю, что вы, возможно, путаете выражения xPath с CSS-селекторами , поэтому в этом случае я бы рекомендовал использовать следующий jQuery код:

// Put a script tag including jquery.js here

<div id="container">
  <a href="http://google.com">Google</a>
  <a href="http://yahoo.com">Yahoo</a>
  <a href="http://msn.com">MSN</a>
</div>

<script>
    $("a").prepend("Visit ");
    alert($("#container").html());
</script>

Привет.

Answer 2

Краткий ответ - «нет».

XPath - это метод выбора элементов в DOM.Его также можно использовать для чтения атрибутов и вычисления значений, но его нельзя использовать для изменения DOM.Вы можете запутаться в XSLT, который использует выражения XPath для выбора элементов и может вернуть измененный документ.Вы можете использовать общий XML-документ, а затем использовать разные таблицы стилей XSL с помощью XSLT для создания разных документов на разных языках, например, HTML, XML, postscript и т. Д.

В любом случае, зачем вам беспокоитьсяXPath в этом случае?Существует коллекция document.links , которая требует простого доступа к свойству, без вызовов функций или оценки выражений XPath.Вы можете изменить простое текстовое содержимое, присваивая свойству W3C textContent или частному MS innerText (опять же, простой доступ к свойству, а не вызовы функций):

function modLinks() {

  var links = document.links;
  var i = links.length;

  while (i--) {
    setText(links[i], 'Visit ' + getText(links[i]) );
  }
}

// Simple helper functions, can be made faster and more robust
// but sufficient for an example. 

function getText(el)  {

  if (typeof el.textContent == 'string') {
    return el.textContent;

  } else if (typeof el.innerText == 'string') {
    return el.innerText;
  }
}

function setText(el, text)  {

  if (typeof el.textContent == 'string') {
    el.textContent = text;

  } else if (typeof el.innerText == 'string') {
    el.innerText = text;
  }
}

Answer 3

Как упоминалось выше, XPath не работает эффективно с неразобранными строками.

Таким образом, один из подходов состоит в том, чтобы установить innerHTML некоторого элемента (например, невидимого) в исходную строку HTML.

Это приведет к тому, что источник будет проанализирован в дереве DOM. Затем вы можете использовать myDiv.getElementsByTagName ('a') или jQuery $ ('a', myDiv), чтобы найти ссылки. (Вы можете даже использовать XPath .//a, но зачем использовать более сложный инструмент, если подойдет более простой?)

Затем, как только вы изменили строки, например, как кто-то сказал, используя jQuery $('a', myDiv).prepend("Visit ");, вы можете вывести измененный HTML-код, получив свойство innerHTML невидимого div.