javascript - Jquery 在 HTML 中的两个特定单词之间切换内容

Question

我有以下 Javascript 代码来在 -a- 和 -ea- 之间切换内容。 当它运行时，我的 HTML 中有一个“查看答案”链接。 现在，我想要的行为如下:在 -example- 和 -endexample- 之间，我应该有一个“查看示例”链接，在 -sample- 和 -endsample- 之间，我应该有一个“查看示例”链接等等。

fiddle https://jsfiddle.net/eoc74009/6/

    $(document).ready(funciton(){
    initToggleContent();
});

initToggleContent = function(){
    var p_content = $(".content").html();
    p_content = p_content.replace(new RegExp("-a-","g"),"<div class='hidden toggle-content'>")
  p_content = p_content.replace(new RegExp("-ea-","g"),"</div><hr>")
  $(".content").html(p_content);
  $("<a class='toggle-button'>View Answer</a>").insertBefore(".toggle-content");
  $(document).on('click',".toggle-button",function(){
    $(this).next(".toggle-content").toggleClass("hidden");
    if($(this).html()==="View Answer"){
        $(this).html("Hide Answer");
    }
    else{
    $(this).html("View Answer");
    }
  });

}

Answer 1

您可以使用此代码:

p_content = p_content.replace(/-([^\-]+)-([\s\S]*)-end\1-/gm, function(_, name, content) {
   return '<a class="toggle-button" data-name="' + name +
    '">View ' + name + '</a>' +
    '<span class="hidden toggle-content">' +
    content + '</span><hr>';
});

span 而不是 div，因为 div 不能位于 p 标签内。

正则表达式解释:

-([^\-]+)- 将匹配破折号、任意数量的非破折号和破折号

([\s\S]*) 将匹配包括换行符在内的任何内容

-end\1- 将匹配破折号结尾和先前匹配的名称

括号用作捕获组，因此您可以在替换中引用它们。

并修改点击处理程序:

$(document).on('click',".toggle-button",function(){
    $(this).next(".toggle-content").toggleClass("hidden");
    var name = $(this).data('name');
    if($(this).html()==="View " + name){
        $(this).html("Hide " + name);
    }
    else{
        $(this).html("View " + name);
    }
});

<强> JSFIDDLE