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

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

我有一个html字符串，如下所示：

 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>';

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

'[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]'

因此，替换后的最后一个字符串将如下所示：

 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>';

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

'[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]'

'[row][col]内容1
[/col][col]内容2
[/col][row]行间内容
[row][col col]内容3
[/col col]内容4
[/col row]'

，但不知道从何处开始用短代码标记替换html标记

---

我希望一些jquery/javascript天才能够分享他们关于如何解决这个问题的想法：）

这是一个jquery解决方案，因为jquery比使用纯javascript编写代码节省了几行代码

基本上我们会

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

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

我在Codepen上做了一个简单的运行示例

html:

JS:

$（文档）.ready（函数（）{
var content='content 1
content 2
行间内容
content 3
content 4
'；
var$dataWrapper=$（“”）；
$dataWrapper.html（content）；//将要转换的数据打包到div中。
//对于容器元素中的每列
$dataWrapper.find（'.columns'）。每个（函数（）{
var htmlInsideColumn=$（this.html（）；
var convertedHtml=“[col]”+htmlInsideColumn+“[/col]”；
$（this）.after（convertedHtml）；//让我们将转换后的html放在这个column元素后面。
$（this）.detach（）；//删除此元素。
});
//对于容器元素中的每一行
$dataWrapper.find（'.row'）。每个（函数（）{
var htmlInsideColumn=$（this.html（）；
var convertedHtml=“[row]”+htmlInsideColumn+“[/row]”；
$（this）.after（convertedHtml）；//让我们将转换后的html放在这个row元素后面。
$（this）.detach（）；//删除此元素。
});
$（“#输出”）.text（$dataWrapper.html（））；
});

@Ji_in_编码非常好！我需要这样的东西来引用一篇在自定义构建论坛上的文章，该论坛有一个富文本编辑器（例如，CkEditor），但我不想复制图像和媒体，否则引用就会太大

所以我有一个带有html的变量，我想用文本替换html标记

我用它制作了一个jQuery函数：

     /**
     * Replace an HTML tag in a string with a text
     *
     * @param {string} content
     * @param {string} tag
     * @param {string} replaceText
     *
     * @return {string}
     */
    replaceTagWithText: function (content, tag, replaceText) {
        var $dataWrapper = $('<div>');
        $dataWrapper.html(content);   //wrap up the data to convert in a div.

        $dataWrapper.find(tag).each(function(){
            var convertedHtml = '<br/>' + replaceText;
            $(this).after(convertedHtml); //let's place the converted html right after this element.
            $(this).detach(); //remove this element.
        });

        return $dataWrapper.html();
    }

---

你想做的事很容易做到。但这样做的目的是什么？您是在试图转义提交的标记，还是这正是另一个应用程序所需的数据格式？@Ji_in_编码这样做的目的是使短代码在wordpress中更“直观”。这就是为什么我需要在提交之前或当用户返回到“原始”编辑器时将html转换回短代码：）这非常有效！非常感谢您，感谢您对正在发生的事情做出的精彩评论：）