4

我有一个基于 tinymce 的文档，我需要对其进行查找/替换。

文档中的标记将在 html 中具有特定<!--nextpage-->的注释标记，如下所示：

<p>some content</p><!--nextpage-->
<p>some more content</p><!--nextpage-->

我需要做一个脚本化的查找/替换，迭代<!--nextpage-->标记中的每个出现并用锚元素替换它。

锚点需要有一个连续的 id 值“anchor+N”，其中N是文档中锚点的索引加 1。

因此，对于上述文本，替换将产生：

<p>some content</p><a id="anchor1"></a>
<p>some more content</p><a id="anchor2"></a>

jQuery可以做到这一点还是我需要使用正则表达式之类的其他东西？

4

1 回答 1

4

您可以获取innerHTMLof thebody并对其进行替换，完成后将新文本写回。

DEMO - 1 - 使用 JavaScript 替换 HTML

尽管代码有效，但替换 HTML 可能会产生后果。如果您有任何事件绑定到其中的任何元素，body它们现在将被解除绑定，因为您已经替换了 HTML。

如果可能的话，如果您对它有任何影响，我不会将其<!--nextpage-->用作占位符，但可能是一个空元素，您可以使用选择器作为目标，<div class="nextpage-placeholder"></div>例如。

这样，您可以仅定位和替换特定元素，而不影响其余代码。

DEMO - 2 - 使用 jQuery 替换元素

另一种方法是可能只是将类分配给实际p标签，然后简单地使用 jQueryafter添加锚点。

DEMO - 3 - 使用 jQuery 添加新的锚点

来自演示的代码以防小提琴死了

演示 - 1

<p>some content</p><!--nextpage-->
<p>some more content</p><!--nextpage-->

var text = document.body.innerHTML;
var targetText = "<!--nextpage-->";
var index = 1;

while(text.indexOf(targetText) > -1){
    text = text.replace(targetText, '<a id="anchor' + index + '"></a>');
    index++;
}

document.body.innerHTML = text;

演示 - 2

<p>some content</p><div class="nextpage-placeholder"></div>
<p>some more content</p><div class="nextpage-placeholder"></div>

var $elements = $(".nextpage-placeholder");

$elements.each(function(index){
    $(this).replaceWith('<a id="anchor' + (index+1) + '"></a>')
});

演示 - 3

<p class="nextpage-placeholder">some content</p>
<p class="nextpage-placeholder">some more content</p>

var $elements = $(".nextpage-placeholder");

$elements.each(function(index){
    $(this).after('<a id="anchor' + (index+1) + '"></a>')
});
于 2013-01-23T23:09:15.627 回答