2012-02-08 2 views
6

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

<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 и как его использовать? Есть ли способ идентифицировать строку и прокручивать ее?

Как извлечь «Это заголовок1» (и подобное содержимое, заключенное в теги html) из str1 ?? Я не знаю, что индекс из них, следовательно, не может использовать функцию substr() или substring() в javascript.

ответ

9

Использование .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> 
+0

Thnks .. Он работал .. – user1196522

1

Ну,

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

0

document.getElementById ('{идентификатор элемента}') innerHTML

если использовать JQuery $ ('селектор') HTML()..;

<div id="test">hilo</div> 
<script> 
alert($('#test').html()); 
<script> 
0

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

Я соорудил простой пример является jsfiddle здесь:

http://jsfiddle.net/rS2Wt/9/

Это делает простой замену с помощью JQuery на целевых делах.

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

2

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

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

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

а) Как упомянуто Sinetheta

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

б) Использование ParseXML

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

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

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

var text = $htmlDoc.text(jquery_selector); 

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

Смежные вопросы