Question

为了将p字符串放入div，我们可以像这样使用jquery的wrap（）函数：

 $('p').wrap("<div></div>");

有没有办法在html标签中包含每个字符串'p'？

<html>
    <head>

    </head>
    <body>

        bla bla bla Hello world other words and etc and again Hello world

    </body>
</html>

在这个html文档中有两个“Hello world”，如何将它们放在p标签中？

所需的html结果必须是：

bla bla bla `<p>Hello world</p>` other words and etc and again `<p>Hello world</p>`

Answer 1

使用您的示例..您可以使用正则表达式

这样做

$('body').html(function(i,v){
  return v.replace(/Hello world/g,'<p>Hello world</p>');
});

FIDDLE

或使用拆分

$('body').html(function(i,v){
  return v.split('Hello world').join('<p>Hello world</p>');
});

FIDDLE

Answer 2

据我所知，你想把Hello World放在那个段落元素中。有两种方法可以做到这一点。

要么

$('<p>Hello World</p>').wrap("<div></div>");

或

$('p').wrap("<div></div>").text('Hello World');

Answer 3

您可以找到所有文本节点，

function forEachTextNode(f, node) {
  if (node.nodeType === 3) {
    f(node);
  } else {
    for (var child = node.firstChild, next; child; child = next) {
      next = child.nextSibling;  // Grab next early in case f mutates the DOM.
      forEachTextNode(f, child);
    }
  }
}

然后使用Text.splitText进行拆分，以打破您想要的字词：

function forEachSubstring(f, text, textNode) {
  var i = textNode.nodeValue.indexOf(text);
  if (i >= 0) {
    // Split before the words we want to operate on.
    textNode.splitText(i);
    var substringNode = textNode.nextSibling;
    // Split after the words we want to operate on.
    substringNode.splitText(text.length);
    var rest = substringNode.nextSibling;
    // Operate on the substring.
    f(substringNode);
    // Recurse to look for more occurrences of text.
    forEachSubstring(f, text, rest);
  }
}

然后将它们绑在一起：

function wrapInParagraph(node) {
  var wrapper = node.ownerDocument.createElement('p');
  node.parentNode.replaceChild(wrapper, node);
  wrapper.appendChild(node);
}

forEachTextNode(
    function (tn) { forEachSubstring(wrapInParagraph, "Hello, World", tn); },
    document.body);

将每次出现的字符串放入html标记中

3 个答案: