Jquery – 用值替换字符串中的选定html标记

我正在研究一个tinymce插件，我需要将一些html转换为短代码。

我有一个字符串与html看起来像这样：

var content = '
Content 1
Content 2
Content between rows
Content 3
Content 4
'; 

并希望将带有类行的div“转换”为[row] Content [/ row]，并将class列与[col] Content [/ col]进行div。 所以每行输出都是这样的：

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

所以我替换后的最后一个字符串看起来像这样：

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

我准备了一个jsfiddle ，但不知道从哪里开始用短代码标签替换html标签。

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

Answer 1

这是一个jquery解决方案，因为jquery节省了几行而不是使用纯javascript编写。

基本上我们会

1. 创建一个空的div元素，并将你的html放入这个div。 这允许我使用jquery提供的DOM遍历和操作api。

2. 对所有.columns和.rows执行搜索和更新。

我在Codepen上做了一个简单的运行示例。 你可以玩它 。

HTML：

JS：

 $(document).ready(function(){ var content = '
Content 1
Content 2
Content between rows
Content 3
Content 4
'; var $dataWrapper = $("
"); $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()); });