Question

背景

我正在为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>

我只想用＆＃39; .contactblock＆＃39;替换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。但这对我不起作用。我甚至无法删除div的内部HTML。我真的不知道该怎么做......

Answer 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>

用短代码替换HTML字符串

背景

我需要什么

我尝试了什么

1 个答案: