Question

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

文档中的标记将在html中包含特定的注释标记，如下所示：

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

我需要执行脚本化的查找/替换，迭代标记中每次出现并用锚元素替换它。

锚点需要具有“anchor + N”的顺序id值，其中N是文档中锚点的索引加1。

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

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

jQuery可以这样做，还是我需要使用像regex这样的其他东西？

Answer 1

你可以获得innerHTML的{{1}}并对其进行替换，在完成后再写回新文本。

DEMO - 1 - 使用JavaScript替换HTML

虽然代码有效，但替换HTML会产生影响。如果您有任何绑定到body内任何元素的事件，那么当您替换HTML时，它们将被解除绑定。

如果可能的话，如果你对它有任何影响我不会使用body作为占位符，但可能是一个可以用选择器定位的空元素，例如像那样。

通过这种方式，您可以仅定位和替换特定元素，而不会影响其余代码。

DEMO - 2 - 使用jQuery替换元素

另一种方法是将类分配给实际的<div class="nextpage-placeholder"></div>标记，只需使用jQuery p添加锚点。

DEMO - 3 - 使用jQuery附加新锚点

来自DEMO的代码使小提琴失效

DEMO - 1

after

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

DEMO - 2

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;

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

DEMO - 3

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

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

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

正则表达式或jQuery用迭代计数查找/替换

1 个答案:

来自DEMO的代码使小提琴失效