如何使用 regex 和 javascript 重新排序文本字符串？

Question

例如，我在 textarea 中有这个：

 <textarea>
   <div class="sections">
     <div class="item" id="apple">
        Apple
     </div>
     <div class="item" id="blueberry">
        Blueberry
     </div>
     <div class="item" id="orange">
        Orange
     </div>
   </div>
 </textarea>

使用正则表达式，我想像这样重新排序字符串：

  <textarea>
    <div class="sections">
      <div class="item" id="orange">
         Orange
      </div>
      <div class="item" id="blueberry">
         Blueberry
      </div>
      <div class="item" id="apple">
         Apple
      </div>
    </div>
  </textarea>

我想过做这样的事情，但做的不对：

var string = $("textarea").val() // note: I want to keep this as a string
new_content = string.replace(/<div class="sections">(.*)<\/div>/, '<div class="sections"></div>') // remove inner content
new_content = new_content + string.match(/<div.*id="orange">(.*)<\/div>/)[0]
new_content = new_content + string.match(/<div.*id="blueberry">(.*)<\/div>/)[0] 
new_content = new_content + string.match(/<div.*id="apple">(.*)<\/div>/)[0] 

有什么想法吗？

Answer 1

这是您正在寻找的正确正则表达式。您假设 .* 匹配换行符，这不是 javascript 的默认值。

您可以在此处阅读更多信息： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

$(() => {
  var string = $("textarea").val() // note: I want to keep this as a string
  
  new_content = string.match(/\s*<div.*?class="sections">/g)[0];
  new_content += string.match(/\s*<div.*?id="orange">(.|\s)*?<\/div>/g)[0]
  new_content += string.match(/\s*<div.*?id="blueberry">(.|\s)*?<\/div>/g)[0] 
  new_content += string.match(/\s*<div.*?id="apple">(.|\s)*?<\/div>/g)[0]
  new_content += string.match(/.*>(\s*<\/div>)/s)[1];
  
  $('textarea').val(new_content);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <textarea>
   <div class="sections">
     <div class="item" id="apple">
        Apple
     </div>
     <div class="item" id="blueberry">
        Blueberry
     </div>
     <div class="item" id="orange">
        Orange
     </div>
   </div>
 </textarea>