使用javascript操作html-string变量

时间:2014-02-14 20:50:09

标签: javascript

我需要用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>";

3 个答案:

答案 0 :(得分: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>,然后是一个段落(不包含其中一个关键字)零次或多次。

答案 1 :(得分:1)

我使用了一些DOM来解决这个问题。对于那些喜欢DOM解决方案的人而不是RegExp:

Append elements in a variable instead of a temporary DOM

答案 2 :(得分:0)

使用直接DOM替换/换行会更容易一些(事实上,我写了这样的解决方案,但是当我看到你的评论说你需要字符串输入时重新编写它),但是这里是一个使用的解决方案一个字符串作为输入:

var myArr = ['Foo', 'Bar'];
var contenthtml = '<p>Foo</p>\n'
    + '<p>Lorem ipsum dolor sit amet</p>\n'
    + '<p>Lorem <b>ipsum</b> dolor sit amet</p>\n'
    + '<p>Lorem ipsum dolor sit amet</p>\n'
    + '<p>Bar</p>\n'
    + '<p>Lorem ipsum dolor sit amet</p>';
var elements = $.parseHTML(contenthtml);
var tmp = '';
$.each(elements, function(index, element) {
    $.each(myArr, function(i, e) {
        if (element.innerHTML == e) {
            elements[index] = $('<h1>' + e + '</h1>').get(0);
            return;
        }
    });
    if (elements[index].outerHTML) {
        tmp += elements[index].outerHTML + '\n';
    }
});
contenthtml = '<div class="foo">' + tmp + '</div>';
console.log(contenthtml);

jsfiddle