Question

我正在使用一个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>';

并希望＆＃34;转换＆＃34;带有类的div进入[row] Content [/ row]，并将class列分为[col] Content [/ col]。所以每行输出都是这样的：

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

I have prepared a jsfiddle，但不知道从短代码标签替换html标签的位置。

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

Answer 1

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

基本上我们

创建一个空的div元素，并将你的html放入这个div中。这允许我使用jquery提供的DOM遍历和操作api。
对所有.columns和.rows执行搜索和更新。

我在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());


});

Answer 2

@Ji_in_coding非常好！我需要这样的内容来引用自定义构建论坛上具有丰富文本编辑器（例如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();
    }

用法：

quoteContent = replaceTagWithText(quoteContent, 'img', '* image *');
quoteContent = replaceTagWithText(quoteContent, 'iframe', '* media *');

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

2 个答案: