Как извлечь содержимое HTML-тегов из строки с помощью javascript или jquery? [дубликат]

На этот вопрос уже есть ответ здесь:



Может быть, это очень просто, но я все путаю.
У меня есть простая html-страница со многими разделами (div). У меня есть строка, содержащая HTML-теги в javascript. Код такой: образом:



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript">

var str1="<html><body><div id='item1'><h2>This is a heading1</h2><p>This is a paragraph1.</p></div><div id='item2'><h2>This is a heading2</h2><p>This is another paragraph.</p></div><div id='lastdiv'>last</div></body></html>";

</script>

</head>

<body>

<div id="title1"></div>

<div id="new1"></div>

<div id="title2"></div>

<div id="new2"></div>

</body>

</html>


Я хочу извлечь содержимое HTML-тегов (из строки в javascript) и отобразить это содержимое на моей html-странице в нужных разделах.



То есть я хочу, чтобы "это заголовок 1" отображался в <div id="title1"> и "это параграф 1."будет отображаться в <div id="new1"> и то же самое для второй пары тегов.

Мне нужно, чтобы все это работало только на стороне клиента. Я попытался использовать метод HTML DOM getElementByTagName, и он становится слишком сложным. Я очень мало знаю об этом. на jQuery. И я в замешательстве. Я не понимаю, как это сделать. Вы можете подсказать мне, что использовать - javascript или jquery и как его использовать? Есть ли способ определить из строки и повторить его?

Как извлечь "This is heading1" (и аналогичное содержимое, заключенное в HTML-тегах) из str1?? Я не знаю индекс этих, следовательно, не могу использовать функцию substr () или substring () в javascript.

21948   5  

5 ответов:

Используя .text () как "геттер" и "сеттер" мы можем просто повторить шаблон:

  • цель элемента на странице, которую мы хотим заполнить
  • дайте ему содержание от строка

JsFiddle 

<script type="text/javascript">
var str1="<html><body><div id='item1'><h2>This is a heading1</h2><p>This is a paragraph1.</p></div><div id='item2'><h2>This is a heading2</h2><p>This is another paragraph.</p></div><div id='lastdiv'>last</div></body></html>";
$(function(){
    var $str1 = $(str1);//this turns your string into real html 

    //target something, fill it with something from the string
    $('#title1').text( $str1.find('h2').eq(0).text() );
    $('#new1').text( $str1.find('p').eq(1).text() );
    $('#title2').text( $str1.find('h2').eq(1).text() );
    $('#new2').text( $str1.find('p').eq(1).text() );
})
</script>
10  
2012-02-08 09:47:06

ИМХО, вы можете сделать это в jquery в два этапа:

Шаг 1) разберите строку в XML / HTML-документ.

Есть по крайней мере два способа сделать это:

А) как упоминалось Синететой 

 var htmlString = "<html><div></div></html>";
 var $htmlDoc = $( htmlString );

B) использование parseXML 

var htmlString = "<html><div></div></html>";
var htmlDoc = $.parseXML( htmlString );
var $htmlDoc = $( htmlDoc );

Пожалуйста, обратитесь http://api.jquery.com/jQuery.parseXML/

Шаг 2) Выберите текст из документа XML / HTML. 

var text = $htmlDoc.text( jquery_selector );

Пожалуйста, обратитесь http://api.jquery.com/text/

2  
2012-02-08 10:01:58

Ну,

Прежде всего, вы должны выяснить, как вы получаете исходный html из вашего собственного html. Если вы используете Ajax, вы должны отметить источник как html, даже xml.

1  
2012-02-08 09:37:31

Документ.getElementById ('{ID элемента}').innerHTML

Если использовать jquery $('селектор').html (); 

<div id="test">hilo</div>
<script>
alert($('#test').html());
<script>
0  
2012-02-08 09:37:47

Позвольте мне предварить свой ответ знанием того, что я не думаю, что полностью понимаю, что вы хотите сделать...однако я думаю, что вы хотите заменить некоторый (хотя вы говорите, как все) html с некоторым источником данных.

Я сфальсифицировал простой пример jsfiddle здесь:

Http://jsfiddle.net/rS2Wt/9/

Это делает простую замену с помощью jquery на целевом div.

Надеюсь, это поможет, удачи.

0  
2012-02-08 09:42:19

Comments

    Ничего не найдено.
Click here to cancel reply.