javascript - 在dom元素中插入span而不覆盖子节点？

Question

我有一篇 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);
    }

}

Answer 1

您可以使用$(el).append()，而不是执行所有这些操作。或$(el).prepend()用于插入<span>标签!

$("#k673f4141ea127b").append('<span class="annotation">2003</span>');

或者，如果我理解正确的话，你想结束最后的 2003与 span.annotation正确的？如果是这种情况，您可以这样做:

$("#k673f4141ea127b").contents().eq(1).wrap('<span class="annotation" />');

fiddle :

$(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>