[英]Insert span in a dom element without overwrite child nodes?
我有一篇HTML文章,其中包含一些我可以通過SPARQL查詢檢索的注釋。 這些批注指的是文檔中的某些文本,我必須突出顯示此文本(將其包裝在一個跨度中)。
我已經問過如何在跨度中包裝文本,但是現在我有一個更具體的問題,我不知道該如何解決。 我寫的代碼是:
var currentText = $("#"+v[4]["element"]+"").text();
var newText = currentText.substring(0, v[5]["start"]) + "<span class=' annotation' >" + currentText.substring(v[5]["start"], v[6]["end"]) + "</span>" + currentText.substring(v[6]["end"], currentText.length);
$("#"+v[4]["element"]+"").html(newText);
哪里:
v[4]["element"]
是注釋的父元素的ID
v[5]["start"]
是注釋的第一個字符的位置
v[6]["end"]
是注釋的最后一個字符的位置
請注意, start
和end
不考慮html標簽。
實際上,我的錯誤在於使用text()
方法從節點提取數據(以便能夠返回到批注的正確位置)並使用html()
方法放回數據; 但是以這種方式,如果父節點具有子節點,則它們將丟失並被簡單文本覆蓋。
示例:在“ 2003”上添加注釋
<p class="metadata-entry" id="k673f4141ea127b">
<span class="generated" id="bcf5791f3bcca26">Publication date (<span class="data" id="caa7b9266191929">collection</span>): </span>
2003
</p>
它成為了:
<p class="metadata-entry" id="k673f4141ea127b">
Publication date (collection):
<span class="annotation">2003</span>
</p>
我認為我應該使用節點,而不是簡單地提取和重寫內容,但是我不知道如何在不考慮html標簽和不消除子元素的情況下確定插入注釋的確切點。
我讀了一些有關jQuery .contents()
方法的內容,但是我沒有弄清楚如何在我的代碼中使用它。
誰能幫我解決這個問題? 謝謝
編輯:添加了php代碼以提取頁面的正文。
function get_doc_body(){
if (isset ($_GET ["doc_url"])) {
$doc_url = $_GET ["doc_url"];
$doc_name = $_GET ["doc_name"];
$doc = new DOMDocument;
$mock_doc = new DOMDocument;
$doc->loadHTML(file_get_contents($doc_url.'/'.$doc_name));
$doc_body = $doc->getElementsByTagName('body')->item(0);
foreach ($doc_body->childNodes as $child){
$mock_doc->appendChild($mock_doc->importNode($child, true));
}
$doc_html = $mock_doc->saveHTML();
$doc_html = str_replace ('src="images','src="'.$doc_url.'/images',$doc_html);
echo($doc_html);
}
}
除了執行所有這些操作,您還可以使用$(el).append()
或$(el).prepend()
插入<span>
標簽!
$("#k673f4141ea127b").append('<span class="annotation">2003</span>');
或者,如果我理解正確,您想用span.annotation
包裝最后的2003
嗎? 如果是這樣,您可以執行以下操作:
$("#k673f4141ea127b").contents().eq(1).wrap('<span class="annotation" />');
$(document).ready(function() { $("#k673f4141ea127b").contents().eq(1).wrap('<span class="annotation" />'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="metadata-entry" id="k673f4141ea127b"> <span class="generated" id="bcf5791f3bcca26">Publication date (<span class="data" id="caa7b9266191929">collection</span>): </span> 2003 </p>
最后,我的解決方案是在這個小提琴中。
歸納:
var element = document.getElementById(id);
var totalText = element.textContent;
var toFindText = totalText.substring(start,end);
var toReplaceText = "<span class='annotation'>"+toFindText+"</span>";
element.innerHTML = element.innerHTML.replace(toFindText, toReplaceText);
希望它可以幫助別人。
注意:這不會檢查兩個或更多注釋是否指向同一個節點,我現在正在研究它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.