2015-09-16 4 views
0

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

Я хочу функцию рекурсивного java-скрипта, которая будет перебирать все элементы DOM и изменять содержимое внутри каждого внутреннего тега путем добавления # в начале и конце.

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     <h1>Hello</h1> 
 
     <div id="something"><span><h1>Hello Folks!</h1></span></div> 
 
     <span>Lovely lady</span> 
 
     <div id="name"> 
 
      <div class="random"> 
 
       <div><span>0</span></div> 
 
       <div><span>1</span></div> 
 
      </div> 
 
     </div> 
 
     <div class="detail "> 
 
      <div class="">Process</div> 
 
      <div class="page">4 of 6</div> 
 
      <div class=" "> 
 
       <div class="float-left"> 
 
        <div class="padding-top-default">%</div> 
 
        <div class="page-subheader">1</div> 
 
       </div> 
 
       <div class=""> 
 
        <div class="">Failed</div> 
 
        <div class="page-subheader font-big">0</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </body> 
 

 
</html>

Я хочу # добавляется, если значение зашиты внутри тега. Выходной файл будет похож.

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     <h1>#Hello#</h1> 
 
     <div id="something"><span><h1>#Hello Folks!#</h1></span></div> 
 
     <span>#Lovely lady#</span> 
 
     <div id="name"> 
 
      <div class="random"> 
 
       <div><span>#0#</span></div> 
 
       <div><span>#1#</span></div> 
 
      </div> 
 
     </div> 
 
     <div class="detail "> 
 
      <div class="">#Process#</div> 
 
      <div class="page">#4 of 6#</div> 
 
      <div class=" "> 
 
       <div class="float-left"> 
 
        <div class="padding-top-default">#%#</div> 
 
        <div class="page-subheader">#1#</div> 
 
       </div> 
 
       <div class=""> 
 
        <div class="">#Failed#</div> 
 
        <div class="page-subheader font-big">#0#</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </body> 
 

 
</html>

У меня есть этот скрипт Java вместо

<script> 
 
      
 
      
 
      //$fakediv = $("<div></div>"); 
 
     function convertHtml() { 
 
      
 
    
 
      $body = $("#demo").text(); 
 
       
 
      $fakediv = $("<div></div>"); 
 
      $fakediv.html($body); 
 
      $fakediv.children().each(function() { 
 
        if($(this).text()) 
 
        $(this).text("#" + $(this).text() + "#"); 
 
       }); 
 
      
 
      }); 
 
      $("#demo").text($fakediv.prop("outerHTML")); //fill in the text are with converted html string 
 
     
 
} 
 
      
 
     //Document is ready to execute the JS  
 
     $(document).ready(function() {  
 
      $("#convert").click(function(){ 
 
       // alert($("#demo").text()); 
 
       convertHtml(); 
 
      }); 
 
     }); 
 
     </script>
Но случается выход, как

<div> 
 
    
 
    
 
    
 
     <h1>#Hello#</h1> 
 
     <div id="something">#Hello Folks!#</div> 
 
     <span>#Lovely lady#</span> 
 
     <div id="name"># 
 
      
 
       0 
 
       1 
 
      
 
     #</div> 
 
     <div class="detail "># 
 
      Process 
 
      4 of 6 
 
      
 
       
 
        % 
 
        1 
 
       
 
       
 
        Failed 
 
        0 
 
       
 
      
 
     #</div> 
 
    
 

 
</div>

+0

что вы пробовали? –

+0

Если какой-либо орган хочет увидеть, что на самом деле я делаю, оставьте сообщение, я бы хотел пойти один к одному, чтобы уточнить мой вопрос. – AkAbhi

+0

Пожалуйста, не злоупотребляйте функцией веб-фрагмента. Он существует исключительно для исполняемого веб-кода. Если код не запускается, используйте стандартное форматирование исходного кода (отступы на четыре пробела или с помощью ctrl-K). – Amadan

ответ

0

Вы можете использовать text function

$('body *').text(function(_, txt){ 
    return '#'+txt+'#'; 
}); 

Вот demo

Если есть какие-то правила стиля и JavaScripts внутри тела, то вы можете игнорировать их с помощью not:

$('body *').not('link,style,script').text(function(_, txt){ 
     return '#'+txt+'#'; 
}); 
+0

Это внешний html-файл, и мне нужно показать измененный исходный код в элементе div – AkAbhi

+0

Это убьет все разметки. – Amadan

+0

Теперь он только убьет всю разметку, которая не является «ссылкой, стилем, сценарием». Вам нужно что-то вроде '$ ('*: not (> *)')', чтобы предотвратить элементы, у которых есть дети от выполнения филицида. Или, в зависимости от того, что хочет OP, вы хотите найти все текстовые узлы (которые jQuery не знает, как это сделать) и только обернуть их. – Amadan

0

Give класс для всех элементов, текст которых вы хотите обернуть остроумием h #. а затем использовать следующий код:

$('.hashed').each(function(index, value){ 
    $(this).text("#" + $(this).text() + "#"); 
}); 

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

'*:not(:has(>*))' 

Вот рабочий код:

$(document).ready(function(){ 
 
    $('*:not(:has(>*))').each(function(index, value){ 
 
    $(this).text("#" + $(this).text() + "#"); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     <h1>Hello</h1> 
 
     <div id="something"><span><h1>Hello Folks!</h1></span></div> 
 
     <span>Lovely lady</span> 
 
     <div id="name"> 
 
      <div class="random"> 
 
       <div><span>0</span></div> 
 
       <div><span>1</span></div> 
 
      </div> 
 
     </div> 
 
     <div class="detail"> 
 
      <div>Process</div> 
 
      <div class="page">4 of 6</div> 
 
      <div class=" "> 
 
       <div class="float-left"> 
 
        <div class="padding-top-default">%</div> 
 
        <div class="page-subheader">1</div> 
 
       </div> 
 
       <div class=""> 
 
        <div>Failed</div> 
 
        <div class="page-subheader font-big">0</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

+0

Это внешний файл, и я не могу добавлять классы к каждому из моих тегов, которые необходимо изменить. Тогда какое может быть возможным решением. – AkAbhi

+0

@AkAbhi, то вы можете использовать селектор css, чтобы выбрать все самые глубокие элементы. а затем выполнить операцию над ними. Отредактировал мой пост. – afzalex

+0

По этой причине мы не можем изменить содержимое DOM с помощью CSS. Упомянутый взгляд на мой отредактированный пост. – AkAbhi

3

$(document).ready(function() { 
 
    $('body').find('*').each(function() { 
 
    if ($(this).children().length == 0) { 
 
     $(this).prepend('#').append('#') 
 
    } 
 
    }) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     <h1>Hello</h1> 
 
     <div id="something"><span><h1>Hello Folks!</h1></span></div> 
 
     <span>Lovely lady</span> 
 
     <div id="name"> 
 
      <div class="random"> 
 
       <div><span>0</span></div> 
 
       <div><span>1</span></div> 
 
      </div> 
 
     </div> 
 
     <div class="detail "> 
 
      <div class="">Process</div> 
 
      <div class="page">4 of 6</div> 
 
      <div class=" "> 
 
       <div class="float-left"> 
 
        <div class="padding-top-default">%</div> 
 
        <div class="page-subheader">1</div> 
 
       </div> 
 
       <div class=""> 
 
        <div class="">Failed</div> 
 
        <div class="page-subheader font-big">0</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </body> 
 

 
</html>

0

Здесь вы идете. В отличие от других, этот не будет добавить '##' в теги без содержания, например img, br, пусто span s, etc ...

function eachNode($root) { 
    if ($root.children().size() == 0) { 
     if ($root.text().trim() !== '') $root.text('#' + $root.text() + '#'); 
    } else { 
     $root.children().each(function() { 
      eachNode($(this)); 
     }); 
    } 
} 

eachNode($(document)); 

Извлекает скрипку здесь: http://jsfiddle.net/hra0qste/2/

+0

Обратите внимание, что это не позволяет изменять теги 'script', но это можно легко добавить через' if ($ root [0] .tagName === 'SCRIPT') return' – DBagBaggerWithSwagger

1

Ленивый версия (ничего "foo" в <p>foo <em>bar</em></p> не будет делать):

var html = '<html>\n <head>\n </head>\n <body>\n  <h1>Hello</h1> \n  <div id="something"><span><h1>Hello Folks!</h1></span></div>\n  <span>Lovely lady</span>\n  <div id="name">\n   <div class="random">\n    <div><span>0</span></div>\n    <div><span>1</span></div>\n   </div>\n  </div>\n  <div class="detail ">\n   <div class="">Process</div>\n   <div class="page">4 of 6</div>\n   <div class=" ">\n    <div class="float-left">\n     <div class="padding-top-default">%</div>\n     <div class="page-subheader">1</div>\n    </div>\n    <div class="">\n     <div class="">Failed</div>\n     <div class="page-subheader font-big">0</div>\n    </div>\n   </div>\n  </div>\n </body>\n\n</html>\n'; 
 
    
 
$html = $("<html/>").html(html); 
 
$html.find('*:not(:has(*))').text(function(_, txt) { 
 
if (txt.trim() == "") return ""; 
 
    return "#" + txt + "#"; 
 
}); 
 
$('#output').text($html[0].outerHTML);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<pre id="output"></pre>

Не-ленивым версия включает в себя поиск все текстовые узлы в документе, которые jQuery не знает, как это сделать, поэтому мы Я использую пешеход. Бонус, не JQuery:

var html = '<html>\n <head>\n </head>\n <body>\n  <h1>Hello</h1> \n  <div id="something"><span><h1>Hello Folks!</h1></span></div>\n  <span>Lovely lady</span>\n  <div id="name">\n   <div class="random">\n    <div><span>0</span></div>\n    <div><span>1</span></div>\n   </div>\n  </div>\n  <div class="detail ">\n   <div class="">Process</div>\n   <div class="page">4 of 6</div>\n   <div class=" ">\n    <div class="float-left">\n     <div class="padding-top-default">%</div>\n     <div class="page-subheader">1</div>\n    </div>\n    <div class="">\n     <div class="">Failed</div>\n     <div class="page-subheader font-big">0</div>\n    </div>\n   </div>\n  </div>\n </body>\n\n</html>\n'; 
 

 
var impl = document.implementation; 
 
var htmlDoc = impl.createHTMLDocument(""); 
 
htmlDoc.write(html); 
 

 
var walker = htmlDoc.createTreeWalker(
 
    htmlDoc.documentElement, 
 
    NodeFilter.SHOW_TEXT, null, false); 
 
var node; 
 
while ((node = walker.nextNode())) { 
 
    if (node.textContent.trim() !== "") { 
 
    node.textContent = "#" + node.textContent + "#"; 
 
    } 
 
} 
 

 
document.getElementById('output').textContent = htmlDoc.documentElement.innerHTML;
<pre id="output"></pre>

Обратите внимание, что из-за некоторых деталей HTML разбора, вещи вне <body>, скорее всего, не будут одинаковыми. И примечание о том, что DBagBaggerWithSwagger имеет другое решение, также здесь.

0

Это также должно работать:

function isHTML(str) { 
    var a = document.createElement('div'); 
    a.innerHTML = str; 
    for (var c = a.childNodes, i = c.length; i--;) { 
     if (c[i].nodeType == 1) return true; 
    } 
    return false; 
} 

$(document).ready(function() { 
    var content = document.getElementsByTagName('*'); 
    for (var i = 0; i < content.length; i++) 
    { 
     if (isHTML($(content[i]).html()) == false) 
     { 
      $(content[i]).html('#' + $(content[i]).html() + '#'); 
     }   
    } 
}); 
Смежные вопросы