用 Jquery 将某个元素的一些文本换行到 span 中？

Question

我有一篇 HTML 文章，上面有一些注释，这个注释引用了正文中的一些文本。我想将此文本包装在 <span> 标记中，以便我可以根据需要对其进行修改。

我有一个 SPARQL 查询 returns 我有一些信息和三个重要变量：

element --> 文本容器元素的id

start --> 注释第一个字符在元素内部的位置

end --> 注释最后一个字符在元素内部的位置

下面有一个例子可能会更清楚。

有了这个元素：

    <p class="metadata-entry" id="element_id">
    <span class="generated" id="span1">Publisher: </span>
    BioMed Central
    <span class="generated" id="span2"> (</span>
    London
    <span class="generated" id="span3">)</span>
    </p>

因为我在 "London" 这个词上有注释，当我运行我的查询时，我得到：

element = "element_id"
start = 27
end = 33

现在，在我 ajax 调用 returns 这 3 个值之后，我如何将单词 "London" 包装在一个范围内，以便将其背景设置为特定颜色？

Answer 1

这可能有点脏，但我认为它应该可行。由于您有包含 "London" 的元素，您可以将该元素的 HTML 替换为其中当前内容的修改版本。

您可以在此处查看如何使用 jquery html 函数：

How to replace innerHTML of a div using jQuery?

基本上，您要做的是将它用作 getter 以从 "element_id" 元素中获取 HTML，使用 Javascript 字符串函数对其进行修改通过在您拥有的开始和结束索引处添加跨度标记，然后使用 html 函数将 "element_id" 的 HTML 替换为修改后的字符串。

希望这对你有用！

编辑：为了更好地说明这一点，这基本上是您要做的事情：

var currentHTML = $(element).html();
var newHTML = currentHTML.substring(0, start) + "<span style='background-color: green;'>" + currentHTML.substring(start, end) + "</span>" + currentHTML.substring(end, currentHTML.length);
$("element_id").html(newHTML);

用 Jquery 将某个元素的一些文本换行到 span 中？

Wrap some text of an element in a span with Jquery?

javascript

jquery

dom

word-wrap