用简码替换 HTML 字符串答案

【问题标题】：Replacing an HTML string with shortcodes用简码替换 HTML 字符串
【发布时间】：2016-10-28 12:37:03
【问题描述】：

背景

我正在为 CKEditor 开发一个插件。在将其提交到服务器之前，我需要用短代码替换一些 div 标签。有一个函数可以将编辑器的内容作为字符串提供给我。

var data = CKEDITOR.instances.editor1.getData();

我需要什么

有一个字符串包含以下标记：

<div class="contactblock align-left" data-contact="Peter" data-group="trainer">
<h2>Kontaktdaten</h2>
</div>

<p>...</p>

<div class="contactblock align-left" data-contact="Bernd" data-group="trainer">
<h2>Kontaktdaten</h2>
</div>

<p>...</p>

结果应该是这样的：

[contactblock contact="Peter" group="trainer" align="left"]

<p>...</p>

[contactblock contact="Bernd" group="trainer" align="right"]

<p>...</p>

我只想用 '.contactblock' 类替换 div 元素。所有其他标记应保持不变。

我尝试了什么

在互联网上尝试和搜索了几个小时后，我找不到任何可行的解决方案。我最终得到了以下代码：

var $data = $(data);

$data.filter('.contactblock').each(function(){
    var $this = $(this);
    $this.empty();
});   

var replaced = $data.clone().wrap('<p>').parent().html();

我发现了这个问题：jQuery replaceWith() for HTML string。但这对我不起作用。我什至无法删除divs 的内部 HTML。我真的不知道该怎么办了……

【问题讨论】：

我发现了另一个类似的问题：link。也许这会帮助我找到解决方案。我会试试看的。

标签： javascript jquery html replace ckeditor

【解决方案1】：

你可以试试这样的：

JSfiddle

想法是将 htmlString 设置为虚拟 div 并处理 html 元素。

$("#txtInput").on("blur", function() {
  var t = $("#txtInput").val();
  $("#dummy").html(t);
  var result = "";
  var c = $("#dummy").children();
  $.each(c, function(index, el) {
    if ($(el).hasClass("contactblock")) {
      result += "[contactblock ";
      
      // Get data attributes
      var d = $(el).data()
      result += Object.keys(d).map(function(k) {
        return k + "=\"" + d[k] + "\"";
      }).join(" ");
      
      // get classes
      var _c = "";
      el.classList.forEach(function(clas){
      	var reg = /^align/;
      	if(clas === "contactblock"){}
        else if(reg.test(clas)){
        	result += clas.split("-").join("=\"") + "\"";
        }
        else{
        	_c += clas;
        }
      })
      if(_c)
      	result += " class=\"" + _c + "\"";
      result += "]";
      result += "\n"
    } else {
      result += $(el)[0].outerHTML;
    }
  });
  $("#result").text(result)
})

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<textarea id="txtInput" cols="80" rows="10"></textarea>
<div id="result"></div>
<div id="dummy" class="hide"></div>

【讨论】：