Wrap unwrapped textNode using regex in arbitrary HTML structure

Question

I have pages with HTML that look like this:

<div class="row">
    <div class="col-md-12">
        <h2>Some Title</h2>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div>

Now I need to have the first Lorem ipsum text wrapped in <p></p> tags aswell. Is there a way to detect this and do it with regex? I would be using regex to make these changes directly in the database.

Can't you select with Regex everything between `` and the first `
` ? What language are you using here? is this in happening in the server? — vsync, Jul 31 '19 at 07:00
You'd probably better use a parser instead. It's just a `TextNode` just under whatever the root of all those elements is. — Federico klez Culloca, Jul 31 '19 at 07:00
@vsync I can't do that because above is just an example, and the tags change all the time throughout the page. — turtlehamster, Jul 31 '19 at 07:02
@FedericoklezCulloca Could I get an example please? Much thanks. — turtlehamster, Jul 31 '19 at 07:03
Then why didn't you explicitly shared in your post this beneficial information you just revealed in your last comment? — vsync, Jul 31 '19 at 07:03
Before you decide on regex, study this https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454 — Yunnosch, Jul 31 '19 at 07:23
@vsync can you give me a regex example to select everything between and the first
? — turtlehamster, Jul 31 '19 at 07:42
@turtlehamster i have script who gets text and make a new element
with this text. You want ? Warning: I don't know how to remove another before text without elements. — deon cagadoes, Jul 31 '19 at 07:45
On further inspection, this is no easy task (at least, not with the info you gave). You need one of two things to make this possible: a defined structure *or* some sort of anchor. A defined structure would allow you to traverse the nodes until you find the one that you know contains the TextNode you're interested in, and then wrap it in a paragraph. An anchor would allow you to use a regex or some such to do what deon suggests in their answer. Unfortunately, you said the html around the text may change, so there's nothing really you could use to tell "this is definitely the text I want" — Federico klez Culloca, Jul 31 '19 at 08:04
**Unless** you know that the text will **always** be contained in `div.row>div.col-md-12` (the "structure" I'm talking about in the previous comment), in which case an easy solution can be devised. — Federico klez Culloca, Jul 31 '19 at 08:05
@FedericoklezCulloca yes, that's always the structure. The only thing that changes is
and sometimes there is no second paragraph, just plain text. — turtlehamster, Jul 31 '19 at 08:11

score 1 · Accepted Answer · answered Jul 31 '19 at 08:39

Since your structure is fixed it's just a matter of

Finding the first non-empty TextNode
Creating a p element
Substituting the text node with the paragraph inside the parent node.

I made the paragraphs green so you can see the effect. Just click the "Wrap" button to see it in action.

function wrap() {
  let div = document.querySelector('div.row>div.col-md-12');    // get the container
  for (let i = 0; i < div.childNodes.length; i++) {             // loop through children
    let n = div.childNodes[i];
    if (n.nodeName == "#text" && n.textContent.trim() !== '') { // children found!
      let p = document.createElement('p');                      // create a `p` element
      p.textContent = n.textContent;                            // put the original text inside
      n.parentNode.replaceChild(p, n);                          // swap!
      break;                                                    // we're done here
    }
  }
}

p {
  background-color: green;
}

<div class="row">
  <div class="col-md-12">
    <h2>Some Title</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>
<button onclick="javascript:wrap()">Wrap</button>

score 0 · Answer 2 · answered Jul 31 '19 at 07:57

I used regex search, and when find the string, make a child element of class col-md-12 and removed another string without elements!

<html>
    <body>
        <div class="row">
            <div class="col-md-12">
                <h2>Some Title</h2>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </div>
        </div>
    </body>
    <script>

        var string = document.getElementsByTagName('html')[0].innerHTML;

        var regex = /Lorem ipsum[a-zA-Z0-9_ _,_.]*/g;

        var save = regex.exec(string)[0];
        document.getElementsByTagName('html')[0].innerHTML = document.getElementsByTagName('html')[0].innerHTML.replace(save, "");
        var first = document.createElement("p");
        var text = document.createTextNode(save);
        first.appendChild(text);

        document.getElementsByClassName("col-md-12")[0].appendChild(first);

    </script>
</html>

I will try this out now, thank you for the efforts. Will let you know how it goes. — turtlehamster, Jul 31 '19 at 08:12

Wrap unwrapped textNode using regex in arbitrary HTML structure

and sometimes there is no second paragraph, just plain text.

2 Answers2