javascript - 使用 javascript 操作 html 字符串变量

Question

我需要用 JavaScript 操作一个字符串变量，它有一些 html 内容。我想搜索一些元素，更改它们并用另一个 div 容器包装这些元素。

我怎样才能得到这个:

var myArr = ['Foo', 'Bar'];
var contenthtml = "<p>Foo</p>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem <b>ipsum</b> dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Bar</p>
  <p>Lorem ipsum dolor sit amet</p>";

为此:

contenthtml = "<div class='foo'><h1>Foo</h1>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem <b>ipsum</b> dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p></div>
  <div class='bar'><h1>Bar</h1>
  <p>Lorem ipsum dolor sit amet</p></div>";

Answer 1

您可以使用正则表达式(类似于我在 https://stackoverflow.com/a/21803683/3210837 的其他回答):

var keywordsRegEx = keywords.map(function(x){return x.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');}).join('|');
var result = str.replace(new RegExp('<p>(' + keywordsRegEx + ')</p>\r\n((?:[ \t]*<p>(?:(?!' + keywordsRegEx + ').)*</p>(?:\r\n)?)*)', 'mgi'), '<div><h1 class="$1">$1</h1>\r\n$2</div>\r\n');

参见 http://jsfiddle.net/ncu43/1/一个完整的例子。

正则表达式的作用是匹配 <p> ，关键字之一，</p> ，然后是一个段落(不包含其中一个关键字)零次或多次。