jQuery-用值替换字符串中的选定html标签 [英] Jquery - Replace selected html tags in string with value

问题描述

我正在开发一个tinymce插件，我需要在其中将一些html转换为短代码.

I'm working on a tinymce plugin where I need to convert some html into shortcodes.

我有一个带有html的字符串，如下所示:

I have a string with html looking like this:

 var content = '<div class="row"><div class="large-6 columns"><p>Content 1</p></div><div class="large-6 columns"><p>Content 2</p></div></div><p>Content between rows</p><div class="row"><div class="large-6 columns"><p>Content 3</p></div><div class="large-6 columns"><p>Content 4</p></div></div>';

，并希望将具有类行的div转换"为[row] Content [/row]，并将具有类列的div转换"为[col] Content [/col].这样每一行都会输出如下:

and want to "convert" the divs with the class row into [row]Content[/row], and divs with the class columns into [col]Content[/col]. So a every row would be outputtet like this:

[row]
     [col]Content[/col]
     [col]Content[/col]
[/row]

所以替换后的最终字符串如下所示:

So my final string after the replacement will look something like this:

'[row][col]<p>Content 1</p>[/col][col]<p>Content 2</p>[/col][/row]<p>Content between rows</p>[row][col]<p>Content 3</p>[/col][col]<p>Content 4</p>[/col][/row]'

我已经准备好了jsfiddle ，但不知道从何开始以简码替换html标签标签.

I have prepared a jsfiddle, but dont know where to start on replacing the html tags with shortcode tags.

我希望一些jquery/javascript天才想分享他们对如何解决这个问题的想法:)

I'm hoping that some jquery/javascript geniuses want to share their thoughts on how to solve this :)

推荐答案

这是一个jquery解决方案，因为与使用纯JavaScript编写相比，jquery为我节省了几行.

This is a jquery solution, just because jquery saves me a couple lines than writing using pure javascript.

基本上我们会

1. 创建一个空的div元素，并将您的html放入该div中.这使我可以使用jquery提供的DOM遍历和操作api.

1. create a empty div element, and put your html into this div. this allows me to use DOM traversal and manipulation api provided by jquery.

对所有.columns和.rows进行搜索和更新.

perform search and update on all .columns and .rows.

我在Codepen上做了一个简单的运行示例. 您可以使用它.

I have made a simple running example on Codepen. You can play with it.

html:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<p id="output">
</p>

JS:

$(document).ready(function(){

    var content = '<div class="row"><div class="large-6 columns"><p>Content 1</p></div><div class="large-6 columns"><p>Content 2</p></div></div><p>Content between rows</p><div class="row"><div class="large-6 columns"><p>Content 3</p></div><div class="large-6 columns"><p>Content 4</p></div></div>';

  var $dataWrapper = $("<div>");
  $dataWrapper.html(content);   //wrap up the data to convert in a div.

  //for each column in container element
  $dataWrapper.find('.columns').each(function(){
    var htmlInsideColumn = $(this).html();
    var convertedHtml = "[col]" + htmlInsideColumn + "[/col]";
    $(this).after(convertedHtml);   //let's place the converted html right after this column element.
    $(this).detach();                           //remove this element.
  });

  //for each row in container element
  $dataWrapper.find('.row').each(function(){
    var htmlInsideColumn = $(this).html();
    var convertedHtml = "[row]" + htmlInsideColumn + "[/row]";
    $(this).after(convertedHtml);   //let's place the converted html right after this row element.
    $(this).detach();                           //remove this element.
  });

  $("#output").text($dataWrapper.html());


});

这篇关于jQuery-用值替换字符串中的选定html标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！